前端工程化探索--webpack

2019-07-17 本文已影响0人水煮香蕉

title: 前端工程化探索--webpack
category: Web
tag: webpack
date: 2019-07-16

主标题：前端工程化--webpack

副标题：webpack4 从入门到放弃

缘起

我放弃手把手教了，很难控制好代码的篇幅。接下来的内容你只需要浏览，理解概念即可，希望能辅助你搭好webpack

现代化擅长把简单事情搞复杂的前端工程师离不开构建工具，以前是 grunt（我差点就用过），gulp用了好久（我好想写过这篇文章），现在使用webpack。

安装和配置

安装webpack

先本地安装 webpack@4，没必要全局安装。

npm init -y
npm i webpack webpack-cli -D
# 未来npm i webpack@5 -D

配置文件是一个前端折腾工程师过不去的坎。创建 webpack.config.js，在 package.json 添加字段，这样就使用项目内的webpack了。

package.json新增：

{
    "scripts":{
        "start": "webpack --config webpack.config.js"
    }
}

webpack.config.js 中指定入口entry和出口output

const path = require("path")
module.exports = {
    entry:"./app.js",
    output:{
        filename: "main.js",
        path: path.resolve(__dirname, "dist")
    }
}

这样就可以通过 npm run start 调用webpack了。

安装npm包

接下来说如何管理 js，样式、图片、字体等文件。

别说话，先吃下这一坨npm包：

# 基础 loaders
yarn add -D style-loader css-loader file-loader html-loader cache-loader url-loader
# 基础 plugins
yarn add -D html-webpack-plugin html-webpack-template mini-css-extract-plugin
# 使用 babel 处理 js 兼容性
yarn add -D @babel/core @babel/preset-env babel-loader core-js regenerator-runtime
# 使用 less autoprefixer 处理 css
yarn add -D less less-loader postcss-loader postcss-preset-env 
# 处理 图片 字体 等资源
# yarn add -D img-loader

这些是什么：

loader 不需要引入，直接使用
- style-loader 提取css到页面中以style形式注入。好处是方便热重载好调试
- css-loader 识别css语法
- html-loader 把内存里的html作为字符串输出
- file-loader 解析 require 和 import 导入的资源并输出结果
- url-loader 把一下小资源转换成base64
- cache-loader 缓存loader结果

plugin 需要声明引入
- html-webpack-plugin 方便创建html文件
- html-webpack-template 基于 html-webpack-plugin 升级
- mini-css-extract-plugin 提取css成文件

处理js
- @babel/core 核心库
- @babel/preset-env 预设环境变量
- babel-loader 处理js文件
- core-js regenerator-runtime 处理js兼容性问题

处理css
- less less-loader 我偏爱less，引入less
- postcss-loader postcss-preset-env 引入postcss处理css

在 webpack.config.js 里添加 rule 规则。如果直接贴代码，太长一大坨，分开描述：

修改 webpack.config.js 中新增：module:{ rules: [] }

处理CSS

在处理webpack之前需要创建相关配置文件：

.browserslistrc：

> 1%
not ie <= 8

.postcssrc.js

module.exports = {
  plugins: [
    require("autoprefixer")({
      flexbox: "no-2009"
    })
  ]
};

module.rules[0] 处理 css

module.rules[0] = {
    test: /\.css$/,
    use: [
        "style-loader",
        {
            loader: "css-loader",
            options: {
                importLoaders: 1,
                sourceMap: true
            }
        },
        "postcss-loader"
    ]
};

如果要提取成css文件

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.rules[0] = {
    test: /\.css$/,
    use: [
        {
            loader: MiniCssExtractPlugin.loader,
            options: {
                publicPath: "../" //处理成相对路径
            }
        },

        {
            loader: "css-loader",
            options: {
                importLoaders: 1
            }
        },
        "postcss-loader"
    ]
};
module.plugins = [
  new MiniCssExtractPlugin({
    filename: "css/[name].css"
  })
]

处理Less

和处理 css 差不多。

注入方式

module.rules[1] = {
    test: /\.less$/,
    use: [
        "style-loader",
        {
            loader: "css-loader",
            options: {
                importLoaders: 1,
                sourceMap: true
            }
        },
        "postcss-loader",
        "less-loader"
    ]
};

外置

module.rules[1] = {
    test: /\.less$/,
    use: [
        {
            loader: MiniCssExtractPlugin.loader,
            options: {
                publicPath: "../"
            }
        },
        {
            loader: "css-loader",
            options: {
                importLoaders: 1
            }
        },
        "postcss-loader",
        "less-loader"
    ]
};
// 记得引入plugin

处理 html

因为我想自定义 html文件，比如引入常用的类库，引入自己的统计代码。

const HtmlWebpackPlugin = require("html-webpack-plugin");
module.plugin[0] = new HtmlWebpackPlugin({
    title: "自定义标题",
    filename: "index.html",
    template: path.resolve(__dirname, "../rename/index.html") //提供了html文件的路径
});

处理js

这里主要考虑引入babel，关于babel，我之前写过一篇文章，感兴趣可以找找。

在开发阶段，其实没必要使用bebel，或者把babel的浏览器兼容性调高，最后生产模式再降下来。减少开发时候的计算。

module.rulses[2] = {
    test: /\.jsx?$/,
    loader: "babel-loader"
};

处理图片

我们还可以自动压缩图片，开发阶段不用管，生产模式压一下。但相对应的包安装起来很费劲，更倾向于外置压缩。所以我刚才没有放到前面的包列表里：

npm i -D img-loader imagemin imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant

module.rules[3] = [
  {
    test: /\.(jpe?g|png|gif|svg)$/i,
    use: [
      'url-loader?limit=10000',
      'img-loader'
    ]
  }
]

module.rules[3] = {
    test: /\.(png|svg|jpg|gif)$/,
    use: [
        {
            loader: "url-loader",
            options: {
                limit: config.urlLoader.limit,
                useRelativePath: true,
                outputPath: "./img",
                pulbicPath: "./dist/img"
            }
        },
        {
            loader: "img-loader",
            options: {
                plugins: [
                    require("imagemin-mozjpeg")({
                        quality: config.imgLoader.jpgQuality
                    }),

                    require("imagemin-pngquant")({
                        quality: config.imgLoader.pngQuality
                    }),

                    require("imagemin-gifsicle")({
                        optimizationLevel: config.imgLoader.gifQuality
                    })
                ]
            }
        }
    ]
};

处理字体

module.rules[2] = {
    test: /\.(woff|woff2|eot|ttf|otf)$/,
    use: [
        {
            loader: "url-loader",
            options: {
                limit: 80000,
                name: "fonts/[name].[hash:8].[ext]"
            }
        }
    ]
};

以上就处理了老三样的处理，接下来说提升幸福感的工具。

处理热重载

我们都喜欢边写边看效果。

这就需要安装额外一些内容，安装一个服务器：

npm i -D webpack-dev-server

修改 package.json :

{
    "scripts": {
        "dev": "webpack-dev-server --open"
    }
}

修改配置：

const webpack = require("webpack")
module.exports = {
    devServer:{
      host: "0.0.0.0",
      port: 3000,
      progress: true,
      contentBase: distPath,
      watchContentBase: true,
      hot: true
    },
    plugins: [new webpack.HotModuleReplacementPlugin()]
}

检测到文件变动就自动刷新，启动了一个服务器，这个服务器基于express，关于express我也写过一篇文章，感兴趣可以找找。

处理生产和开发环境

刚才一直提到开发和生产环境，所以大众倾向于把 webpack.config.js分割成三个文件：

webpack.common.js
webpack.dev.js
webpack.prod.js

然后使用这个插件来完成合并操作：

npm i -D webpack-merge

如何使用：

const merge = require("webpack-merge");
module.exports = merge(common, {})
会自动合并两个配置项

分割完代码，重新组织 package.json

{
    "scripts": {
        "start": "webpack-dev-server --open --config webpack.dev.js",
        "build": "webpack --config webpack.prod.js"
    }
}

清理 /dist 文件夹

有时候会多次打包，需要先删除之前打包的东西。我们可以引入一个插件来完成操作：

yarn add -D clean-webpack-plugin

config = {
  plugins: [
    new CleanWebpackPlugin(),
  ]
}

追踪数据

了解每个资源都变成了什么。

yarn add -D webpack-manifest-plugin

goto :Webpack Manifest Plugin

工具优化

使用预设模式

webpack4新增了一个 mode 模式，可以设置为development，production

这样会自动启用一些优化措施。

这里应该有一张图来说明做了哪些优化，如果没有就是找不着了

我们在 dev.confg 和 prod.config 文件里设定不同的mode

使用source map

source map 有一些选项。这里使用 inline-source-map选项。

开发时候使用 devtool: "inline-source-map"

生产时候使用 devtool: "source-map"

使用规范和格式化

先放着不动

处理 less 时候

yarn add -D less less-loader stylelint stylelint-webpack-plugin postcss-preset-env postcss-loader mini-css-extract-plugin

stylelint stylelint-webpack-plugin 规范css文件
mini-css-extract-plugin css打包