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

时间  2019-11-06
标签 一个 合格 webpack4 webpack 配置 工程师 素养 第一 部分 栏目 职业生涯 繁體版
原文   原文链接

标题党

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

准备开发环境

- 安装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进行打包。html

或者配成一个script命令也能够。前端

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

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

webpack处理CSS

假设咱们如今须要在index.js引入css文件。node

// index.js

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

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

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

修改webpack配置文件css3

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已经注入成功了。git

webpack处理sass文件

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

假设咱们如今index.js中须要引入一个base.scss文件。 那么webpack改如何处理sass/scss文件呢?github

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来自哪一个文件。

noe-source-map

修改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.

sourcemap

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
                }
            }
        ]
    }
]
复制代码

css3前缀

抽离样式表为单独的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'
        })
    ]
}

复制代码

打包后你会发现

main.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({})
    ]
}
复制代码

压缩css

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,
            // 等等详细配置见官网
        }),

    ]
}
复制代码

压缩js

后续章节

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程