这是我参与「第四届青训营 」笔记创作活动的第12天
今天是webpack教程，在这里我先分享一下我的webpack笔记，之后在这里进行课程笔记补充。
webpack的配置在webpack.config.js文件中
运行模式：
webpack 两种webpack运行模式：
- development：不压缩main.js，打包快，开发时使用
- production：压缩main.js，打包慢，项目上线时使用
// mode 代表 webpack 运行的模式，可选值有两个 development 和 production
// 结论：开发时候一定要用 development，因为追求的是打包的速度，而不是体积；
// 反过来，发布上线的时候一定能要用 production，因为上线追求的是体积小，而不是打包速度快！
mode: 'development',
运行webpack前会先读取webpack.config.js配置文件，根据配置再运行webpack。
webpack默认约定：默认打包入口文件为：src->index.js 默认输出文件路径为：src->main.js
注意：可以在webpack.config.js中修改打包路径:
- entry节点指定打包入口文件路径
- output指定打包输出路径
// entry: '指定要处理哪个文件'
entry: path.join(__dirname, './src/index1.js'),
// 指定生成的文件要存放到哪里
output: {
// 存放的目录
path: path.join(__dirname, 'dist'),
// 生成的文件名
filename: 'js/bundle.js'
},
webpack只能打包处理以.js后缀名结尾的模块，其它非.js后缀名模块webpack默认处理不了， 需要调用loader加载器才可以正常打包否则会报错！
loader加载器的作用：协助webpack打包处理特定的文件模块 1.css-loader可以打包处理.css相关的文件 2.less-loader可以打包处理.less相关的文件 3.babel-loader可以打包webpack无法处理的高级JS语法
module: {
rules: [
// 定义了不同模块对应的 loader
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
// 处理 .less 文件的 loader
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
// 处理图片文件的 loader
// 如果需要调用的 loader 只有一个，则只传递一个字符串也行，如果有多个loader，则必须指定数组
// 在配置 url-loader 的时候，多个参数之间，使用 & 符号进行分隔
{ test: /\.jpg|png|gif$/, use: 'url-loader?limit=470&outputPath=images' },
// 使用 babel-loader 处理高级的 JS 语法
// 在配置 babel-loader 的时候，程序员只需要把自己的代码进行转换即可；一定要排除 node_modules 目录中的 JS 文件
// 因为第三方包中的 JS 兼容性，不需要程序员关心
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
]
},
这里介绍一下base64防止发起不必要请求
针对url-loader 里的limit用法：当图片字节大于limit设定的数值，就不转换成base64格式
npm run bulid 时 --mode production会覆盖掉webpack.config.js中mode的值，以package.json中为准
source-map调试
// 在开发调试阶段，建议大家都把 devtool 的值设置为 eval-source-map
// devtool: 'eval-source-map',
// 在实际发布的时候，建议大家把 devtool 的值设置为 nosources-source-map 或直接关闭 SourceMap
devtool: 'nosources-source-map',
发布包时尽量关闭source map；压缩源代码
webpack插件的使用：
// 1. 导入 html-webpack-plugin 这个插件，得到插件的构造函数
const HtmlPlugin = require('html-webpack-plugin')
// 2. new 构造函数，创建插件的实例对象
const htmlPlugin = new HtmlPlugin({
// 指定要复制哪个页面
template: './src/index.html',
// 指定复制出来的文件名和存放路径
filename: './index.html'
})
// 3. 插件的数组，将来 webpack 在运行时，会加载并调用这些插件
plugins: [htmlPlugin, new CleanWebpackPlugin()],
devServer: {
// 首次打包成功后，自动打开浏览器
open: true,
// 在 http 协议中，如果端口号是 80，则可以被省略
port: 80,
// 指定运行的主机地址
host: '127.0.0.1'
},
路径替换
我们使用@来代替src这层目录，也可以设置别的路径替换
resolve: {
alias: {
// 告诉 webpack，程序员写的代码中，@ 符号表示 src 这一层目录
'@': path.join(__dirname, './src/')
}
}
