玖叶教程网

webpack

上一节使用html-webpack-plugin插件生成了html模版，并且生成的html模版还引入了生成的bundle.js文件。

上一节的目录如下：

webpack-template
  |- build
    |- webpack.common.js
    |- webpack.dev.js
    |- webpack.prod.js
  |- public
    |- index.html
  |- src
    |- index.js
  |- package.json
  |- yarn.lock

这一节我们延续上一节的内容，实现静态资源的模块化打包。

1、安装样式loader

$ yarn add style-loader -D // 将样式注入到html
$ yarn add css-loader -D // 配置css
$ yarn add less less-loader -D // 配置less
$ yarn add node-sass scss-loader -D // 配置sass
$ yarn add postcss-loader postcss postcss-preset-env -D // 配置postcss相关

2、配置loader

module: {
    rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader', 'postcss-loader']
        },
        {
            test: /\.less$/,
            use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
        },
        {
            test: /\.(scss|sass)$/,
            use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
        }
    ]
}

到这里基本上就可以实现样式的打包了，具体配置方法可以阅读相关loader文档，记住一条规则：从右到左，从下到上

3、根目录下创建postcss.config.js文件

// postcss.config.js
module.exports = {
    plugins: [
        // PostCSS 插件
        'postcss-preset-env'
    ],
};

4、引入mini-css-extract-plugin，抽离css

先安装该插件

$ yarn add mini-css-extract-plugin -D

然后配置即可，此时该配置文件如下

// build/webpack.common.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: 'development',
    entry: path.resolve(__dirname, '../src/index.js'),
    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: 'static/js/[name].[contenthash:8].js',
        clean: true
    },
    plugins: [
        // 生成html模版
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, '../public/index.ejs'),
            title: 'webpack 模版'
        }),
        // 抽离css
        new MiniCssExtractPlugin({
            filename: 'static/css/[name].[contenthash].css'
        })
    ],
    module: {
        rules: [{
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
            },
            {
                test: /\.less$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader']
            },
            {
                test: /\.(scss|sass)$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
            }
        ]
    }
}

到这里基本完成了对样式的处理（当然这还不是最终结果，后续我们会进一步优化它）。

此时整个项目结构如下：

webpack-template
  |- build
    |- webpack.common.js
    |- webpack.dev.js
    |- webpack.prod.js
  |- public
    |- index.html
  |- src
    |- index.js
  |- package.json 
  |- postcss.config.js
  |- yarn.lock

下一节将配置其它的一些静态资源，有兴趣的可以关注一下。