关于webpack 以及 webpack配置和常用插件的学习记录 （1）
主要概念：
- Entry : webpack的入口，构建的第一步从entry开始。
- Output : 输出，经过webpack处理后的得到最终想要的代码。
- Loader : 模块转换工具，把模块的原本内容转换成新的浏览器能看得懂的东西。
- Plugin : 插件，可以注入你需要扩展的东西。
- Module： 在webpack中一切皆模块，一个模块对应一个文件，webpack会从配置的entry开始递归找出所有的模块。
- Chunk : 代码块，用于代码合并和分割。
context：
webpack内相对路径的根目录，默认为webpack所在的当前目录。可配置 （context必须为绝对路径）
module.export = {
context: path.resolve(__dirname, 你要改变的路径)
}
Entry：
入口模块的路径，可以写成 字符串、 数组 和 对象格式。
entry: './index.js' entry: ['./index1.js', './index2.js'] entry: {a: './index1.js', b: ['./index2.js', './index3.js']}
Output :
output配置怎样输出最终想要的代码，为一个对象，包含一系列的配置
1，filename
如果只有一个输出文件，那么直接写 filename： ‘bundle.js’
如果有多个chunk要输出，那么就要用到name变量了，webpack会为每一个chunk取一个名字，这时候就可以根据chunk的名称来区分输出的文件 filename:' [name].js'
2，chunkFilename
配置无入口的chunk在输出时的文件名称。
3，path
配置输出文件在本地存放的目录，必须是string类型的绝对路径。
4，publicPath
5，crossOrginLoading
6，libraryTarge和library
Module：
module是用来配置如何处理模块
1，rules ： 配置模块的读取和解析规则，一般是配置loader，类型为一个数组，里面的每一项都用来描述如何去处理匹配的文件。
一般通过test、include和exclude三个配置来匹配loader要应用的文件
选中后的文件通过use配置项来应用loader，可以应用一个loader或者按照前后顺序来应用一组的loader，还可以给loader添加参数。
module: { rules: [ { test:/\.less$/, use: ['style-loader', 'css-loader', 'less-loader'], include: path.resolve(__dirname, 'static/css') }, { test: /\.js$/, 或者： test: [/\.jsx$/,/\.js$/] use: ['babel-loader'], exclude: path.resolve(__dirname, 'node_modules') 或者 exclude： [path.resolve(__dirname,'node_modules'), path.resolve(__dirname, 'nouse_modules')] } ] }
2， noParse
让webpack忽略对部分没有采用模块化文件的递归解析和处理。
3，parser
配置哪些模块化功能可以被解析，哪些不解析。 parser可以精确到语法层面上，noParse只能控制哪些文件不解析。
Resolve ：
resolve是用来配置webpack怎么寻找模块对应的文件。
1，akias
resolve.alias配置是通过别名来把原来的导入路径映射到一个新的路径
resolve:{ alias: { '@': resolve('src') } }
实际上是把导入语句中的@ 替换成了 '/src'
2，mainFields
有些第三方模块会提供几份不同环境的代码，比如es5代码，es6代码等。mainFields用来配置 引用第三方模块的时候，引用哪个版本的文件。
默认为 mainFields: ['browser', 'main']
3,extensions
在导入的文件没有带文件后缀时，webpack会自动带上extensions里面提供的后缀去寻找文件是否存在。
举例： 在vue项目中，一般写法为 extensions:['.js', '.vue', '.json']
4，modules
resolve。modules是用来配置webpack去哪些目录去找第三方模块。默认是node_modules目录，如果有大量的模块都在 ./src/components 里面，我们可以用modules来优化。
modules: ['./src/components', 'node_modules']
5，descriptionFiles
用来配置第三方模块的文件名称，也就是package.json文件。
6，enforceExtension
如果配置为true，所有的导入文件语句都要带文件后缀。
7，enforceModuleExtension
和enforceExtension作用类似，但只对node_modules下的模块生效。
Plugin：
plugin的配置项接收一个数组，数组的每一项都是要使用的插件的实例，插件需要的参数通过构造函数传入。 下面的插件是生成html文件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html'
})
]
}
配置plugin的难点是在 你用的plugin本身需要的配置项。
Target：
让webpack构建出针对不同运行环境的代码。有以下选项：
- web 默认，针对浏览器
- node require语句加载chunk，针对node
- async-node 异步加载chunk
- webworker 针对webworker
.......
DevTool：
配置webpack如何生成source map，默认是false。想让构建的代码生成source map方便调试，可以这样配置：
module.exports = { devtool: 'source-map' }
watch：
webpack支持监听文件变化重新编译。默认是关闭的。
在使用devserver时，监听默认是开启的。
Externals：
用来告诉webpack哪些模块不用被打包。
比如我们直接在项目的html中引入了jquery <srcipt src='jquery.min.js'></script>。如果我们需要在模块中使用，可以还需要 import $ from 'jquery'，这样就导致了jquery出现了两次。
通过externals配置可以告诉webpack哪些已经引入全局了，针对这些全局的不用打包，可以直接使用全局变量。
module.exports = { externals: { jquery: 'jQuery' } }
ResolveLoader：
resolveloader告诉webapck如何去找到对应的loader，默认在使用loader时是通过它的包名来引用的。
