webpack学习

一，output中filename：'[name].bundle.js'中的name属性取决于entry中定义的入口变量，例：

 entry: {
        app: './src/index.js',
        print: './src/print.js'
    },
    output: {
        filename: '[name].bundle.js', // 这里会打包生成app.bundle.js和print.bundle.js两个js文件
        path: path.resolve(__dirname, 'dist')
    }

 二，plugins中的HtmlWebpackPlugin的基本用法：重新生成index.html文件，将打包生成的js文件自动添加到index.html中，这样就避免在webpack.config.js改变了entry入口文件的变量名时，index.html文件中的引入却没有改变。

三，clean-webpack-plugin的作用：每次打包的时候清除之前的dist文件夹中的文件，所以dist中文件都是新生成的必须的文件

四，devtool: 'inline-source-map'的作用：能够准确的找到错误发生的原文件及地点，这在打包开发环境的时候很有用

五，webpack-dev-server的作用：创建了一个简单的web服务器，并且能够实时重新加载

六，懒加载：懒加载指的是动态加载js文件，在第一次需要用到这个js之前不加载，需要的时候再加载，加载js用到了动态导入，

在webpack的配置文件中的output输出中定义chunkFilename: '[name].bundle.js'。取值的方式：import(/* webpackChunkName: "print" */ './print').then(module => { var print = module.default; print(); });

七，防止缓存：在webpack的配置文件中的output中定义filename: '[name].[chunkhash].js'，chunkhash会生成唯一的hash值，且打包后的html引用也会指向这里。

八，提取公共依赖文件到一个新的打包文件中，这样就能做到防止代码重复加载：在plugins中定义new webpack.optimize.CommonsChunkPlugin({name: 'common' // 指定公共 bundle 的名称。})

九，提取第三方库到单独的文件中，这样可以减少客户端向服务端请求的次数：在入口entry中定义一个文件名，将所有的第三方库放在这个数组对象里，vendor：【‘lodash’】，然后在plugins中定义new webpack.optimize.CommonsChunkPlugin({name: 'vendor' // 指定公共 bundle 的名称。})，此时就已将lodash放在了vendor的文件中

十，main，vendor，manifest，这三个打包生成的文件中main文件代表所有的业务逻辑，vendor文件代表第三方库，manifest代表提取出来的公共的依赖文件；在打包的时候main会随着自身的改变而hash值改变，vendor会随着自身的moudle.id的改变而改变，manifest会随着业务代码中发生新引入文件而改变。一般来说依赖库打包生成的vendor是不会改变的，所以vendor的hash值也不应改变，new webpack.HashedModuleIdsPlugin()能让vendor的hash值维持不变。

十一，定义全局变量：不需要在业务代码中引入js文件，可以利用在webpack.config.js中的plugins的webpack.ProvidePlugin定义全局变量，例new webpack.ProvidePlugin({ _: 'lodash' })，就是在项目全局中定义了一个 _变量，这个变量是来自lodash

十二，webpack.config.js想要获取到env变量，就必须将module.exports转换为一个函数，给与env赋值的时候，可以在package.json里面通过命令赋值webpack --env.NODE_ENV=local --env.production --progress

十三，多页面应用配置：

const path = require('path');
const fs = require('fs');
// 处理公共entry
const commonEntry = ['./src/vendor.js', './src/polyfill.js'];
// 页面目录
const PAGES_DIR = './src/pages/';
const entry = {};
// 遍历页面目录
const getPages = () => {
  return fs.readdirSync(PAGES_DIR).filter(item => {
    let filepath = path.join(PAGES_DIR, item, 'index.js');
    if (!fs.existsSync(filepath)) {
      filepath = `${filepath}x`; // jsx
    }
    if (!fs.existsSync(filepath)) {
      return false;
    }
    return true;
  });
};
getPages(options).forEach(file => {
  const name = path.basename(file);
  // 加入页面需要的公共入口
  entry[name] = [...commonEntry, `${PAGES_DIR}/${file}/index`];
});
// 导出配置
module.exports = {
  entry,
};

十四：简单的webpack-dev-js配置：

const path = require('path')
const htmlPlugin=require('html-webpack-plugin');
module.exports = {
    entry: './src/study.js',
    devServer: {
        inline:true
    },
    plugins:[
        new htmlPlugin({
            filename:'index.html',
            template:"./study.html"
        })
    ],
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'dist')
    }

}

十五：增加对新目录的支持：

// 扩展 webpack 配置，使 packages 加入编译
const path = require('path')
function resolve (dir) {
  return path.join(__dirname, dir)
}
  chainWebpack: config => {
    config.module
      .rule('js')
      .include
        .add(resolv('packages')) // 此处一定要加上绝对路径导入
        .end()
      .use('babel')
        .loader('babel-loader')
        .tap(options => {
          // 修改它的选项...
          return options
        })
  }

十六：配置.eslintrc.js文件，使其匹配代码编辑器：在rules中加入：'vue/script-indent': ['warn', 4, {'baseIndent': 1}]，在module.exports中加入overrides:[ { 'files':['*.vue'], 'rules':{ 'indent':'off' } } ]

十七：resolve项常见配置

  resolve: {
    extensions: ['.js', '.vue', '.json', '.ts'], // 引入文件时可以自动忽略文件的后缀名
    alias: {
      '@': resolve('src') // 给路径加上别称
    }
  }

十八：在控制台获得mock请求的方法：利用webpack的代理模式来配置代理请求

devServer: {
    port: port,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      // change xxx-api/login => mock/login
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: `http://127.0.0.1:${port}/mock`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },
    after: require('./mock/mock-server.js')
  },