webpack 配置文件、配置项、插件

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具备更加简洁 , 适应性更强 , 可读性更加 , 层级关系更加明显 , 更易于代码的维护等诸多好处 .