webpack entry output resolve

chunkFilename和webpack.optimize.CommonsChunkPlugin插件的作用差不多，都是用来将公共模块提取出来，但是用法不一样
文件入口的写法：

• 单个文件
  方法一：

entry:{
   index:'./src/index.js'
}

方法二：

entry:'./src/index.js'

• 多个文件

entry:{
  main:'./src/main.js',
  index:'./src/index.js'
}

注意输出只能是一个

• 一个输入一个输出：

output:{
  path:path.resolve('./build'),
  filename:'main.js'
}

• 多个入口

output:{
  path:path.resolve('./build'),
  filename:'[name].js',
  chunkFilename:'scripts/[name].js?v=[chunkhash:8]'
}

webpack —配置resolve

resolve是一个库（library），可以帮助找到模块的绝对路路径。

webpack在启用后会从配置的入口模块出发找出所有依赖的模块，resolve配置webpack如何寻找模块所对应的文件。Webpack 内置 JavaScript 模块化语法解析功能，默认会采用模块化标准里约定好的规则去寻找，但你也可以根据自己的需要修改默认的规则。

• alias
  resolve.alias 配置项通过别名来把原导入路径映射成一个新的导入路径。例如使用以下配置：
  
• extensions
  
• modules
  
  参考链接：https://www.cnblogs.com/joyco773/p/9049760.html

1.loaders：告诉webpack如何转化处理某一类型的文件，并且引入到打包出的文件中。loader负责处理文件css，jsx，一次处理一个文件。loader可以在import或”加载”模块是预处理文件，类似gulp的task。plugins并不是直接操作某个文件，他直接对整个构建过程起作用，打包webpack过程的方式。（注意在webpack4中用modules.rules代替module.loaders）
2.自动生成webpack配置用webpack-cli等脚手架工具
模块热更新：代码修改后不用舒心浏览器就可以更新，是高级版的自动刷新浏览器

CommonJs:require()语句
AMD:define和require语句
ES5：import语句
babel-loader:把ES6转化为ES5
css-loader:加载参数是，支持模块化、压缩、文件导入等特性
style-loader：把css注入到JS中，通过DOM操作去加载css
eslint-loader：通过ESLint检查JS代码

升级成webpack4

参考链接：https://github.com/diamont1001/webpack-summary/issues/4

1.webpack-cli：

webpack 4 把核心代码和客户端分离开了，现在需要安装一个 webpack-cli 才可以启动 webpack 命令。
全局安装：

npm i webpack-cli -g
项目依赖：

npm i webpack --save-dev
npm i webpack-cli --save-dev
或者 package.json 配置：

{
  "webpack": "^4.1.1",
  "webpack-cli": "^2.0.12"
}

2.html-webpack-plugin:要升级到 3.0.6 以上。

3.module.loaders 替换为 modules.rules

4.CommonsChunkPlugin

CommonsChunkPlugin删除之后，改成使用optimization.splitChunks进行模块划分，详细文档看 这里。