一个合格的Webpack4配置工程师素养：第一部分

栏目: CSS · 发布时间: 6年前

内容简介：总结Webpack4常见的配置, 含DEMO, 一步步肥肠详细，略长, 后续结束时候我们给出源码文件。然后通过或者配成一个script命令也可以。

总结Webpack4常见的配置, 含DEMO, 一步步肥肠详细，略长, 后续结束时候我们给出源码文件。

准备开发环境

- 安装node
- 安装webpack
- npm init 初始化项目
复制代码

目录结构

写跑一个小demo

// src/index.js

import _ from 'lodash'

function create_div_element () {
    const div_element = document.createElement('div')
    div_element.innerHTML = _.join(['kobe', 'cpul'], ' ')
    return div_element
}

const div_ele = create_div_element()
document.body.appendChild(div_ele)

复制代码

// dist/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack4</title>
</head>
<body>
    <script src="./bound.js"></script>
</body>
</html>

复制代码

// webpack.config.js

const path = require('path')

module.exports = {
    entry: './src/index.js',
    mode: 'development',
    output: {
        filename: 'bound.js',
        path: path.resolve(__dirname, 'dist')
    }
}

复制代码

然后通过 npx 执行webpack进行打包。

或者配成一个script命令也可以。

"scripts": {
    "build": "npx webpack -c webpack.config.js"
 }
复制代码

npx webpack
复制代码

在浏览器打开index.html就会发现代码执行成功了。

webpack处理CSS

假设我们现在需要在index.js引入css文件。

// index.js

import './style/reset.css'
复制代码

我们需要使用专门的loader来解析css, 并把css注入到html文件

npm i -D css-loader style-loader
复制代码

修改webpack配置文件

const path = require('path')

module.exports = {
    entry: './src/index.js',
    mode: 'development',
    output: {
        filename: 'bound.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.css/,
                use: ['style-loader', 'css-loader'] // use的顺序从右往左
            }
        ]
    }
}
复制代码

这个时候你在npx webpack, 打包后执行index.html你会发现css已经注入成功了。

webpack处理sass文件

现在前端项目都是使用一些css预处理器来帮助更好的使用CSS，如Sass等。

假设我们现在index.js中需要引入一个base.scss文件。那么webpack改如何处理sass/scss文件呢?

npm install sass-loader node-sass -D
复制代码

// src/style/base.scss

$bd-bg: pink;
body {
    background: $bd-bg;
}
复制代码

// index.js

import './style/base.scss'
复制代码

更过配置文件处理scss

const path = require('path')

module.exports = {
    entry: './src/index.js',
    mode: 'development',
    output: {
        filename: 'bound.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.(sc|sa|c)ss$/,
                use: ['style-loader', 'css-loader', 'sass-loader'] // use的顺序从右往左
            }
        ]
    }
}

复制代码

webpack为sass添加source map

配置source map是为了当出现错误时候方便我们进行定位调试，当然我们在生产环境不需要启动这个。

像我们上面例子中, 你会发现打包后我们看不出scss来自哪个文件。

修改webpack配置文件。

const path = require('path')

module.exports = {
    entry: './src/index.js',
    mode: 'development',
    output: {
        filename: 'bound.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.(sc|sa|c)ss$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            }
        ]
    }
}

复制代码

打包后在浏览器打开index.html.

webpack为css添加CSS3前缀

PostCSS是一个用 JavaScript 工具和插件转换 CSS 代码的工具, 功能强大, 我们最常用的就是利用PostCSS帮我们Autoprefixer 自动获取浏览器的流行度和能够支持的属性，并根据这些数据帮你自动为 CSS 规则添加前缀。

npm i -D postcss-loader autoprefixer postcss-import

// postcss-import: 在使用@import css文件时候让webpack可以监听并编译
// postcss-nextcss: 支持css4
复制代码

修改配置文件

rules: [
    {
        test: /\.(sc|sa|c)ss$/,
        use: [
            {
                loader: 'style-loader'
            },
            {
                loader: 'css-loader',
                options: {
                    sourceMap: true
                }
            },
            {
                loader: 'postcss-loader',
                options: {
                    ident: 'postcss',
                    sourceMap: true,
                    plugins: loader => [
                        // 可以配置多个插件
                        require('autoprefixer')({
                            browsers: [' > 0.15% in CN ']
                        })
                    ]
                }
            },
            {
                loader: 'sass-loader',
                options: {
                    sourceMap: true
                }
            }
        ]
    }
]
复制代码

抽离样式表为单独的css文件并打版本号

抽离css前提是我们只在生产环境这么做, 因此你的配置文件的mode: production。

另外抽离了css就不能在使用style-loader注入到html文件。

npm i -D mini-css-extract-plugin
复制代码

配置一个script命名

"scripts": {
    "dist": "cross-env NODE_ENV=production npx webpack --progress --config webpack.prod.config.js"
  },
复制代码

添加一个webpack.prod.config.js.当然正式项目我们是会拆分配置文件, 然后通过merge处理。

- webpack.base.config.js
- webpack.dev.config.js
- webpack.prod.config.js
- webpack.vue.config.js
复制代码

这里demo就没有这么做, 所以代码有些冗余。

// webpack.prod.config.js

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const devMode = process.env.NODE_ENV !== 'production'

module.exports = {
    entry: './src/index.js',
    mode: 'production',
    output: {
        filename: 'bound.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.(sc|sa|c)ss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            plugins: (loader) => [
                                require('autoprefixer')({
                                    browsers: [
                                        'last 10 Chrome versions',
                                        'last 5 Firefox versions',
                                        'Safari >= 6',
                                        'ie > 8'
                                    ]
                                })
                            ]
                        }
                    },
                    {
                        loader: 'sass-loader'
                    }
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: devMode ? '[name].css' : '[name].[hash:5].css', // 设置输出的文件名
            chunkFilename: devMode ? '[id].css': '[id].[hash:5].css'
        })
    ]
}

复制代码

打包后你会发现

这个时候我们如果去使用只能在index.html去引用它了, 很明显这是不方便的, 因为我们css文件肯定很庞大, 后面会解决这个问题, 这里就略过。

webpack压缩JS和CSS

压缩的作用自然是为了减小包的体积了, 提升加载效率, 因此压缩都是配置在生产环境。

压缩css

Webpack后面版本应该会内置CSS压缩, 目前先手工配置。

npm i -D optimize-css-assets-webpack-plugin
复制代码

更改配置文件:

const OptimizeCSSAssertsPlugin = require('optimize-css-assets-webpack-plugin')

optimization: {
    minimizer: [
        // 压缩CSS
        new OptimizeCSSAssertsPlugin({})
    ]
}
复制代码

JS压缩

npm i -D uglifyjs-webpack-plugin
复制代码

修改配置文件

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

optimization: {
    minimizer: [
        // 压缩JS
        new UglifyJsPlugin({
            // 有很多可以配置
            cache: true,
            parallel: true,
            sourceMap: true,
            uglifyOptions: {
                 // 在UglifyJs删除没有用到的代码时不输出警告
                warnings: false,
                output: {
                    // 删除所有的注释
                    comments: false,
                    // 最紧凑的输出
                    beautify: false
                },
                compress: {
                    // 删除所有的 `console` 语句
                    // 还可以兼容ie浏览器
                    drop_console: true,
                    // 内嵌定义了但是只用到一次的变量
                    collapse_vars: true,
                    // 提取出出现多次但是没有定义成变量去引用的静态值
                    reduce_vars: true,
                }
            }
        })
    ]
}
复制代码

这个时候去打包我发现一个错误, ERROR in js/background.js from UglifyJs Unexpected token: keyword (const) 。

Uglify-js不支持es6语法，请使用terser插件, 于是我们更改使用terser插件试试, 其实你继续用uglifyjs-webpack-plugin也可以, 只需要配合babel先转下。

npm install terser-webpack-plugin -D
复制代码

更多使用见官网 terser-webpack-plugin 。

optimization: {
    minimizer: [
        // 压缩JS
        new TerserPlugin({
            cache: true,
            parallel: true,
            sourceMap: true,
            // 等等详细配置见官网
        }),

    ]
}
复制代码

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Java Servlet & JSP Cookbook

Bruce W. Perry / O'Reilly Media / 2003-12-1 / USD 49.99

With literally hundreds of examples and thousands of lines of code, the Java Servlet and JSP Cookbook yields tips and techniques that any Java web developer who uses JavaServer Pages or servlets will ......一起来看看《Java Servlet & JSP Cookbook》这本书的介绍吧!

码农工具