webpack

webpack

【推荐】
webpack官网
总结别人对webpack的理解
https://segmentfault.com/q/1010000007581542
process.env设置
devDependencies和dependencies区别
vue-loader处理vue文件
vue-loader处理过程
深入理解vue-loader如何使用
开发过程中vue项目保存编译慢优化方法
url-loader
vue中引入全局scss大坑
一文读懂babel-loader、babel-polyfill、babel-transform-runtime的区别和联系
html-webpack-plugin详解
webpack 之 DefinePlugin
详解CommonsChunkPlugin的配置和用法
配置：

1. entry定义入口文件位置，可以多个，（多入口对应多页面）

  entry: './path/to/my/entry/file.js',
  entry: {
    main: './path/to/my/entry/file.js',
  },
  entry: ['./src/file_1.js', './src/file_2.js'],

2. output定义输出文件，只能有一个

  output: {
    filename: 'bundle.js',
  }
  vue的output配置
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },

3. loader：在模块被引入之前，预处理模块中的内容，不同的loader可以处理不同的文件

vue-loader解析vue文件中的template,script,style语言块，然后交给不同的loader处理
babel-loader是一个js编译器，将js语法编译成浏览器可以识别的es5语法
url-loader用于对小图片使用base64加密
sass-loader用于处理.scss或者.sass文件（推荐【sass-loader@7.3.1， node-sass@4.12.0高版本全局使用scss会报错】）
{
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
       {
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass'],
        include: [resolve('assets')]
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },

4. plugin：打包优化，资源管理，注入环境变量

webpack.dev.conf.js中插件
html-webpack-plugin:生成html文件入口，将html文件中引入的外部资源如script、link添加编译后的hash，防止缓存
DefinePlugin：将系统环境变量存储在process.env中
HotModuleReplacementPlugin：代码修改后自动更新（热更新）
NoEmitOnErrorsPlugin：报错不阻塞
Friendly-errors-webpack-plugin：识别webpack错误
copy-webpack-plugin：在webpack中拷贝文件和文件夹，在vue中使用的是将static目录中的文件拷贝到dist
webpack.prod.conf.js中插件
UglifyJsPlugin:对js文件进行压缩
extract-text-webpack-plugin：将css打包到独立的scc文件
optimize-css-assets-webpack-plugin：css文件进行压缩
HashedModuleIdsPlugin：文件不变时打包hash不变
CommonsChunkPlugin：提取第三方库和公共模块,node_modules和webpack运行文件
compression-webpack-plugin:gzip压缩

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
    // copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']
      }
    ])
  ]
};

5. webpack是一个打包工具，可以从入口文件开始解析文件的依赖，将代码打包