Webpack2 学习

Webpack2是一个非常流行的JavaScript模块打包工具，它可以将各种静态资源（包括JavaScript、CSS、图片、字体等）打包成一个或多个JavaScript文件，以便于在浏览器中加载和运行。Webpack2相比于早期的版本，带来了很多新的特性和改进，使得它更加强大、灵活和易于使用。

webpack CLI

webpack //最基本的启动webpack的方法
webpack -p //对打包后的文件进行压缩
webpack -d //提供source map，方便调式代码
webpack -w //webpack --watch（缩写就一个-），提供watch方法；实时进行打包更新
webpack --progress //看见打包的过程（百分比进度显示）常用
webpack --hide-modules //隐藏打包的原因常用
webpack --display-module // 看见打包的模块
webpack --config webpack.dev.config //指定webpack处理的js 常用
webpack --display-reason // 看见打包的原因
webpack --colors //打包信息显示颜色
--module-bind // 绑定loaders功能

webpack基础配置

entry 入口

js
let pkg = require('./package.json');

entry: {
    app: './www/main.js',
    vendor: Object.keys(pkg.dependencies)  
}

output 输出以及js命名

js
output: {
    publicPath: '/', 
    path: path.resolve(__dirname, 'dist'),
    filename:'js/[name]-[chunkhash:5].js',
    chunkFilename:'js/[name]-[chunkhash:5].js'
}

resolve 路径重定向以及扩展

js
resolve:{
    extensions: ['.js', '.vue'],
    alias: {
        'vue': 'vue/dist/vue.js',
        '@': path.resolve(__dirname, 'www')
    }
}

devServer

开发模式下自动刷新

js
devServer:{
    port:9090,
    quiet:true,   友好错误插件使用时需加入此参数   插件名：friendly-errors-webpack-plugin
    inline:true,
    open:true,
    host: '0.0.0.0',  可以让你的服务器被外部访问（同一个局域网下）
    hot:true,     热更新，需启动热更新插件    插件名：webpack.HotModuleReplacementPlugin(),
    overlay:{
        errors:true,
        warnings:true
    }
}

webpack loader

js
module:{
  rules:[
    {
      test: /\.vue$/,
      loader: 'vue-loader',
      options: {
        loaders: {
          /*所需loader：vue-loader,vue-style-loader,vue-template-compiler（版本超过2.5报错）*/
          css: ExtractTextWebpackPlugin.extract({
            use: [{
              loader: 'css-loader',   /*css-loader*/
              options: {
                minimize: true, //css压缩
              },
            }],
            fallback: 'vue-style-loader',
          }),
          scss: ExtractTextWebpackPlugin.extract({  // 补齐css浏览器前缀，引入css无效，引入scss或者less或者style里面写样式有效
            use: [{
              loader: 'css-loader',
              options: {
                minimize: true, //css压缩
              },
            }, { loader: 'sass-loader' }],  /*sass-loader，node-sass*/
            fallback: 'vue-style-loader',
          }),
        },
        postcss: [require('autoprefixer')(    /*postcss-loader autoprefixer */
          { browsers: ['last 10 Chrome versions', 'last 5 Firefox versions', 'Safari >= 6', 'ie > 8'] })],
      },
    },

    {
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: /node_modules/,
    },
    /*所需loader：babel-core,babel-loader,babel-preset-env 需新建.babelrc {
     "presets": ["env"],
     }  */
    /*懒加载时，需加入babel-plugin-syntax-dynamic-import  且.babelrc修改为 {
     "presets": ["env"],
     "plugins": ["syntax-dynamic-import"]
     }*/

    {
      test: /\.(jpg|png|gif)$/,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 10000,
            name: 'img/[name].[ext]',
          },
        },
        { loader: 'image-webpack-loader' },
      ],
    },
    /*所需loader：url-loader,file-loader,image-webpack-loader*/

  ]
}

webpack plugin

html-webpack-plugin：打包时html的模板文件

js
filename: 文件名
template: 采用模板的路径
inject: js引用放置于head还是body
chunks:[ ] 可以指定数组内相应的js
excludeChunks:[ ] 排除数组内相应的js
minify: {
    removeComments: true,          // 剥离html注释
    collapseWhitespace: true,      // 折叠空白 
    removeAttributeQuotes: true //尽可能删除属性引号 
}

webpack.HotModuleReplacementPlugin()

webpack-dev-server热更新所需插件

webpack.DefinePlugin()

设置系统环境变量

js
{
  'process.env': {
        NODE_ENV: '"production"',
        BASE_API: '"http://www.embracex.com:8081"',
    }
}

friendly-errors-webpack-plugin

开发调试时友好错误提示

webpack.optimize.UglifyJsPlugin()

js代码压缩

js
{ 
  compress: { warnings: false },
  sourceMap: true    //开启后js才可以编译出.map
}

extract-text-webpack-plugin

css抽离，版本过高报错，目前使用@2.1.2

js
  { 
     filename:'css/[name]-[contenthash:5].css', 
     allChunks:true 
  }

optimize-css-assets-webpack-plugin

合并重复css块，使用scoped的无法合并

webpack.HashedModuleIdsPlugin()

生成稳定的chunkId

webpack.optimize.CommonsChunkPlugin()

可以既保持代码的完整性，又不会重复下载公共代码了

js
 {name:'vendor'}
 {name: 'manifest',chunks: ['vendor']}

webpack runtime被集成到vendor.js，每次打包，webpack runtime都会发生变化，导致vendor即使没有更改，chunkhash也会改变，单独抽出这块变化的部分，成为一个js，即manifest

inline-manifest-webpack-plugin

将manifest.js请求内联，不用进行请求得到

clean-webpack-plugin

删除路径下的文件['dist']

path.resolve、path.join

js
// path.resolve  
path.resolve(__dirname, 'www')   G:\vueStudy\www
path.resolve(__dirname, '/www')  G:\www

// path.join
path.join(__dirname, '/www')   G:\vueStudy\www
path.join(__dirname, 'www')    G:\vueStudy\www

webpack代码分割

写成函数式，以让外部调用时，无论如何都只会生成一个chunk

js
module.exports=(file)=>resolve=>require.ensure([],()=>resolve(require('@/layout/'+file+'.vue')))

赋值变量时，会单独生成chunk 如上，会生成两个chunk chunkName可以自己命名，如下，chunk名依次为'A'，'B'，此时webpack需进行配置 output.chunkFilename，chunkName不填写，则依次默认'0','1'