webpack

大城市里の小女人 提交于 2020-02-27 05:21:36

前端的工程化和自动化

grunt  gulp  browserify    webpack
  • 当今主流
    • webpack vue react angular
  • 当前市面 2 个版本
    • webpack 3.0
    • webpack 4.0

一、webpack 基础认识

  • 官网地址
    • 官网: https://webpack.js.org/
    • 中文: https://www.webpackjs.com/
    • 前身: browserify 缺点,只能转化js

webpack作用?

  • 项目管理、打包、模块管理(依赖问题)、加载资源(js/css/html/png../woff/data/vue...),转换器(loader)
  • 前身:grunt/gulp/browserify->webpack->pratcle

webpack的历史

  • webpack1支持CMD和AMD,同时拥有丰富的plugin和loader,webpack逐渐得到广泛应用。
  • webpack2 支持ES Module,分析ESModule之间的依赖关系,webpack1必须将ES,Module转换成CommonJS模块,2支持tree sharking
  • webpack3 新的特性大都围绕ES Module提出,如Scope Hoisting和Magic Comment;

前端的模块化

  • AMD : require.js
  • CMD : sea.js( 弃用了 )
  • COMMON.js : node.js
  • 环境支持: Node 8

安装 :

  • 全局
    • npm i webpack webpack-cli -g
    • cnpm i webpack webpack-cli -g
    • yarn add webpack webpack-cli global
    • cli 命令行工具 打包会依赖cli
  • 本地(项目目录)
    • npm i webpack webpack-cli --save-dev 开发依赖
  • 项目: 优先找本地 ----》 全局

概念:
webpack是一种静态编译工具(预编译)
我们主要研究: 入口文件、出口、转换器、插件


二、webpack--打包

development: 开发环境

production; 生产环境

  • 二阶段项目
    • 生产环境 浏览器直接运行了
    • 开发环境 程序员而言, 依赖服务器环境来做
  • webpack --mode development 会自动找src/index.js 到 dist/main.js
    • 要求设置开发模式|生产模式
  • webpack 入口地址 --mode development 指定出口

  • webpack aa/index.js --mode development bb/index.js 自定义

  • 环境分离
    • development:
      • a.浏览器调试工具
      • b.注释、开发阶段的详细错误日志和提示
      • c.快速和优化的增量构建机制
    • production:
      • a.开启所有的优化代码
      • b.更小的main大小
      • c.去除掉只在开发阶段运行的代码
      • d.Scope hoisting(作用域提升)和Tree-shaking(打包的结构只包含实际用到的 exports)

三、webpack----自动解决依赖:

原理:

  • Webpack 会分析入口文件,解析包含依赖关系的各个文件。这些文件(模块)都打包到 main.js 。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时,会先执行 main.js 中的代码,其它模块会在运行 require 的时候再执行。

四、webpack - loader:

  • webpack默认只支持javascript文件(默认)
  • 其他文件(CSS/LEASS/..) 需要用加载器(loader)
  • loader: 类似一种转化器, 它可以把一个东西,转成另一个
    • 需要下载 style-loader(读取到的css文件插到页面) css-loader(读取css文件)
    • 下载: npm install style-loader css-loader -D
    • require('style-loader!css-loader!./xx.css')

五、配置:

webpack.config.js 是一个nodejs

  • 作用: 配置一些webpack需要入口、出口、loader、Chunk代码块、Plugin扩展插件、Module模块
    编写:
        module.exports={
            entry:'./src/index.js'    入口文件
            output:{ 默认输出到dist
                path:path.resolve(__dirname,'dist')//指定编译目录  不写默认指定到dist
                filename:'js/boundle.js'//以编译目录为根的出口文件路径
            },
            module: {
                rules:[
                    {test:'/\.css$/',use:['style-loader','css-loader']}
                ]
            },
            mode:'development' | production 区别环境
        }

多入口(多页面)

    entry: 入口接收string | json
        {app:'index1.js',app2:'index2.js'} 输出要求多输出
    output: {
        path:path.resolve(__dirname,'dist') //指定编译目录
        publicPath:'dist', //指定虚拟目录 不写指向编译目录,html引入js时,必填
        filename:'bundle.js' 单文件输出 | '[name].js' 多输出  html引入app和app2 配合
    }

    webpack    开发环境下编译(打包到bundle.js)
    webpack -p    生产环境下编译(打包到bundle.js,并压缩)
    webpack -w    监听文件改动,自动编译,不用每次运行,但不会自动刷新浏览器

六、webpack --前端服务器--webpack-dev-server

http-server / server / webpack-dev-server 第三方服务包

  • 需要自动刷新: webServer 搭建前端开发服务器
    • cnpm install webpack-dev-server -g | -D
    • 参数:
      • 命令行
      • webpack-dev-server --port 8088 --open --mode development
      • 写到webpack.config.js配置文件:
devServer: {//和module同级
            port: 8088,
            open:true
        }
  • 终端运行方式2: webpack-dev-server

    • 把运行命令放到package.json文件: devServer可以不要了
    • 终端: npm run dev
    "scripts":{
              "dev": "webpack-dev-server  --port 8088 --open"
          }

七、webpack---优雅降级

babel使用: ES6->ES5 tracuer babel

  • 低版本: npm install babel-loader babel-core babel-preset-es2015 -D
  • 高版本: npm install babel-loader@8.0.4 @babel/core @babel/preset-env -D
    • 做个js文件模块,测试导出引入
    • 导出模块:
      • export default {}
    • 引入模块:
      • import 名字 from 模块名
    • 配置babel预设:
        module>rules> + {}
          {
            test:/\.js$/,
            exclude:/node_modules/, 排除
            use:[{
              loader:'babel-loader',
              options:{
                presets:['@babel/preset-env']
              }
            }]
          }

八、webpack --- 省略引入文件名后缀

   // 配置webpack.config.js
    resolve: {     //与module同级
        extensions: [ '.js', '.css', '.json', '.jsx']
    }
    require('./style')// 可以省略后缀名

九、webpack --- 产出html

  • webpack webpack-dev-server webpack-cli 本地的
  • npm i html-webpack-plugin ---save-dev
  • const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins:[
            new HtmlWebpackPlugin({
                template: './index.html',
                filename: './index.html',//默认到output目录
                hash:true,//防止缓存,会给文件后面加入hash
                minify:{
                    removeAttributeQuotes:true//压缩 去掉引号
                }
            })
    ]
  • publicPath: '/', 指定虚拟目录为空,因为index进入到dist目录里了,不在外面了
  • filename: 'js/[name].js',

十、css抽离(代码分离)

  • yarn add extract-text-webpack-plugin@next --dev
  • npm i extract-text-webpack-plugin@next --save-dev | -D
    • //@next 兼容webpack4 未来会不需要
  • const ExtractTextWebapckPlugin= require("extract-text-webpack-plugin")
//loader配置:
    use: ExtractTextWebapckPlugin.extract({
          use: 'css-loader'
        }) //不再需要style-loader

//pulgin配置
    new ExtractTextWebapckPlugin('css/[name][hash:6].css')

十一、图片打包

  • yarn add url-loader file-loader --dev
  • npm I url-loader file-loader --save-dev
//url-loader 存base64  file-loader存文件(woff mp3)
    {
        test:/\.(png|jpg|gif)/,
        use:[{
          loader: 'url-loader',
          options: {
            limit: 5000,//字节少于5000 ——》 base64  超过5000  file
            outputPath: 'images/', 5000意思存到images
          }
        }]
      }

//css中引入 | js动态(模块化) 引入

十二、资源copy:

  • 静态资源(js,数据图片,json) 生产环境
  • npm i copy-webpack-plugin -D
const CopyWebpackPlugin = require('copy-webpack-plugin')
//plugin配置
    new CopyWebpackPlugin([
      { from: path.resolve(__dirname,'static'), to: path.resolve(__dirname,'build/static') }
    ])

十三、配置文件拆分

webpack.config -> webpack.config.dev|prod

   
"dev": "webpack --mode development --config config/webpack.config.dev.js",
"build": "webpack --mode production --config config/webpack.config.prod.js",
"server": "webpack-dev-server --mode development --config config/webpack.config.dev.js"

十四、

  • devtool: 'source-map'
  • 制定报错信息的源
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!