# webpack重点内容
# 1.入口entry
由这个模块来构建项目的内部依赖图，默认值是./src/index.js
可以直接在配置中进行配置
entry: './src/index.js',
# 2.出口output
输出webpack创建的bundle的目标位置，默认值是./dist/main.js
配置文件中需要配置的属性有
output: {
filename: 'build.js',
path: resolve(__dirname, 'build')
}
# 3.loader
对webpack无法直接处理的文件类型进行预处理，将其转换成commonJS模块，处理后添加至依赖图中
配置文件中主要需要配置识别属性test、加载器属性use
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
"css-loader"
]
},
{
test: /\.scss$/,
use: [
'style-loader', // 在head中创建style部分，并添加入口函数中的样式
"css-loader", // 将.css文件转换成commonJS模块
"sass-loader" // 将.scss进行预处理，编译成.css文件
]
},
]
}
// 注意：use中加载器的执行顺序为从下至上，从右至左
// 而且都需要先利用npm安装后，再进行使用，少数加载器有相互封装的情况则根据具体情况来使用，比如file-loader就封装在url-loader中，所以一般安装是需要都安装完毕，使用时则只需要使用url-loader即可
# 4.插件plugin
一般来处理loader进行不了的任务，比如打包优化，资源管理，注入环境变量等等。更加具体的例子：比如使用HtmlWebpackPlugin插件，在每次生成bundle文件后会自动创建对应的html文件
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
// webpack是以nodejs为基础开发的，所以webpack使用最多的就是commonJS模块，比如上面的require
plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })]
// 这个插件开发时一般要配合devServer来使用
# 5.mode[模式]
webpack中一共有三种模式：开发模式development，生产模式production，none，生产模式会将代码进行压缩，所以开发或者学习时一般用开发模式development
// webpack.config.js
module.exports = {
mode: 'production',
};
// 利用脚本改变
// package.json
"scripts": {
"build": "webpack --mode production" // 发布时使用
}
以上核心内容本质上都是module.exports的属性，也叫做节点
# 6.其他比较重要的属性
# devServer
//webpack.config.js
devServer: {
static: resolve(__dirname, 'build'),
open: true, //打包完成后自动打开浏览器
host: "localhost",//主机地址
port: 80 //端口号，若设置端口号为80，则默认隐藏
}
// 以上内容不是必须的，但是devServer可以更灵活的配置serve
// package.json
"scripts": {
"dev": "webpack serve" // 运行webpack时同时开启devServer的web-server
}
这个组件的作用是编译后使用内存搭建一个web server，实现通过访问localhost就能实时监控项目的改动，必须搭配html-webpack-plugin插件一起使用，且该插件初始化时必须指定template参数，但是webpack-dev-server会阻止打包文件在本地磁盘中的创建，而是在内存中创建对应的虚拟文件
因为它的serve是在内存中操作虚拟文件，并且若html-webpack-plugin以默认方式创建html文件的话会直接失败
# devtool
devtool:"eval-source-map", // 建议在开发中使用这个sourcemap，可以精确定位bug
// sourceMap是一个信息文件，里边存储着位置信息，若将devtool设置为source-map，
// 则会打包一个.map文件，里边有精确的源代码信息，所以在任何情况下都不建议将devtool设置为source-map
//devtool:"nosources-source-map", // 建议在生产中关闭sourcemap或者使用这个sourcemap，为了安全性，防止被追踪
devtool，开发工具，主要作用是利用不同的sourceMap进行代码追踪，便于快速进行bug定位，但是也存在一定的安全性问题，所以要根据具体的情况选择不同的sourceMap
# resolve
resolve: {//配置模块解析
// 创建important或者require的别名，可以将特定的文件或者目录解析成自定义名称，导入时只需导入对应的key即可
alias: {
// 告诉webpack，程序员写的代码中，@表示src这一层目录
"@":resolve(__dirname, './src/')
}
}
resolve可以进行模块解析的配置，而alias属性的主要作用是简化important或者require的路径，上面的代码利用@替换./src开发目录，可以使所有的导入都以./src作为路径起始点
# 注意:
webpack无需loader也能够解析json文件和js文件，也就是说，在入口函数中，可以直接import对应的文件来使用，而不需要调整配置文件wepack.config.js