Webpack4.x 打包css/scss/sass并实现热更新

创建项目，然后执行：npm init 创建package.json文件。

开始安装需要的包：

需要的模块有：

• webpack

• webpack-cli

• webpack-dev-server

• node-sass

  安装方法：cnpm/npm install -D webpack webpack-cli webpack-dev-server node-sass

需要的loader：(安装方法跟上面webpack安装一样，所以下面就不在重复了)

• style-loader 样式写入页面的header标签内

• css-loader

• sass-loader

• file-loader 解决js、css中引入的图片

• html-loader 解决html中引入图片问题

需要的plugins：

• clean-webpack-plugin 删除压缩包，删除输出位置生成的文件
• mini-css-extract-plugin 提取css到单独文件的插件
• optimize-css-assets-webpack-plugin 引入压缩css的插件

webpack.config.js

const path = require("path");
const webpack = require("webpack");
//将html打包
const htmlplugin = require("html-webpack-plugin"); 
//提取css到单独文件的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//删除压缩包，删除输出位置生成的文件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
//引入压缩css的插件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');


module.exports = {
    mode: "development",
    // entry: "./src/index.js",
    entry:{
        home:"./src/index.js",
    },
    output: {
        filename: 'js/[name].[hash:4]-boundle.js',
        path: path.join(__dirname, "dist")
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        port: 9000,
        historyApiFallback: true, //当使用 HTML5 History API 时，任意的 404 响应都可能需要被替代为 index.html
        overlay: true,
        hot: true //热更新
    },
    devtool: "inline-source-map",
    module: {
        rules: [
            {
                // test: /\.scss$/,
                test: /\.(sa|sc|c)ss$/,
                                //执行顺序是从右到左的，先scss-loader编译 --> css-loader --> style-loader放入页面中（document中）
                // use: ['style-loader', 'css-loader', 'sass-loader']  
                use: [
                    'style-loader', 
                    {
                        loader: "css-loader"
                    },
                    // "css-loader",  //或者这样
                    "sass-loader"
                ],
            },
            {
                test: /\.(jpg|png|gif|svg|webp|jpeg)$/,
                use: [
                    {
                        loader:"file-loader",
                        options:{
                            name:"[name].[ext]",
                            publicPath:'/images/',
                            outputPath:'images/'
                        }
                    },
                ]
            },
            {
                test: /\.(html|ejs)$/,
                use: ['html-loader']
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'style/[name].css',//都提到build目录下的css目录中
            chunkFilename: 'style/[id].css',
            // ignoreOrder: false, // Enable to remove warnings about conflicting order
        }),
        //压缩css
        new OptimizeCssAssetsPlugin(),
        new CleanWebpackPlugin(),
        new htmlplugin({
            title: 'home-test1',
            filename:'index.html',//输出后的文件名称
            template: path.join(__dirname, 'src', 'index.html'),
            chunks:['home'] //需要引入的js文件名称
        })
    ],
}

package.json

"scripts": {
    "dev": "webpack-dev-server",
    "build": "webpack"
  },

最后贴下我的文件目录：

image.png

注：此处的css是嵌入HTML的header标签中的，我这里是未做样式的提取。下一篇将会介绍多页面的webpack打包，将会单独提取css文件，还有生产开发环境的区分选择。

image.png