1. webpack 配置文件 webpack.config.js 配置项
- entry
入口文件 , 告诉 webpack 打包从哪个文件开始 , 可以有一个或多个入口文件 .
- output
出口文件 , 也就是打包生成的文件存放位置 , 只能有一个 .
- Loader
对源代码进行转换 , 例如: 将 scss , less 转换为 css ; 将 es6 转换为 es5 ; 将 css 引入到 js 文件中 .
- plugins
当 loader 不能满足所有功能时 , 需要下载插件并引入 , 然后配置 .
2. 插件(plugin)
安装相应的插件 , 可以完成相应的功能 , 扩展 webpack 的功能 .
使用插件 : 在 webpack.config.js 引入实例模块 , 完成相应配置 .
- html-webpack-plugin
安装: npm install html-webpack-plugin --save-dev
作用 : 依据一个 html 模板 , 生成一个自动引入打包过后的 js 文件的新的 html 文件 .
- uglifyjs-webpack-plugin
安装: npm install uglifyjs-webpack-plugin --save-dev
作用: 对 js 文件进行压缩优化缩小
在配置文件中添加实例:
new UglifyJSWebpackPlugin({
uglifyOptions: {
compress: {
drop_console: true, // 删除所有的 `console` 语句，可以兼容ie浏览器
collapse_vars: true, // 内嵌定义了但是只用到一次的变量
reduce_vars: true, // 提取出出现多次但是没有定义成变量去引用的静态值
},
warnings: false, // 在UglifyJs删除没有用到的代码时不输出警告
output: {
beautify: false, // 最紧凑的输出
comments: false, // 删除所有的注释
}
},
sourceMap: true
}),
- mini-css-extract-plugin
安装: npm install mini-css-extract-plugin --save-dev
作用: 对 css 文件进行剥离 , 将 css 提取为独立的文件的插件 , 对每个包含 css 的 js 文件都会创建一个 css 文件 , 支持按需加载 css 和 sourceMap .
- optimize-css-assets-webpack-plugin
安装: npm install optimize-css-assets-webpack-plugin --save-dev
作用: 对 css 文件进行优化压缩 .
- css / css预处理器 : less scss
识别 css 安装 : npm install style-loader css-loader --save-dev
less 安装 : npm install less-loader less --save-dev
scss 安装 : npm install sass-loader node-sass --save-dev
作用 : 让css具备更加简洁 , 适应性更强 , 可读性更加 , 层级关系更加明显 , 更易于代码的维护等诸多好处 .