webpack 将js中引入的css文件独立打包成css文件

项目概览

当前目录结构：

src文件中的login.js

 

 打包后dist文件夹里login文件夹下的login.js(上面js文件中引入的css文件已经打包到js文件中)

webpack.config.js文件

 

现在开工

webpack官网找到plugin中的MiniCssExtractPlugin插件

链接：https://www.webpackjs.com/plugins/mini-css-extract-plugin/

 

 按照官网操作进行

第一步：在项目中安装 mini-css-extract-plugin插件。在项目所在路径的终端中输入以下命令后回车等待安装

npm install --save-dev mini-css-extract-plugin

 第二步：按照官网更改webpack.config.js文件

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
    entry:path.resolve(__dirname,'src/login.js'),
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'login/login.js',
        clean:true
    },
    plugins:[new HtmlWebpackPlugin({
        // 模板文件
        template:path.resolve(__dirname,'src/login.html'),
        // 输出文件
        filename:path.resolve(__dirname,'dist/login/login.html')
    }),
    new MiniCssExtractPlugin()
  ],
    module: {
        rules: [
          {
            test: /\.css$/i,
            use: [MiniCssExtractPlugin.loader, "css-loader"],
          },
        ],
      },
}

 第三步：在项目所在路径的终端中输入npm run build 后回车

 发现打包后的dist文件夹中多了main.css文件,打包后的login.js文件中也没有css代码了，可见已经成功将js中引入的css文件独立打包成css文件。 

 

 打开dist文件夹中的login.html可以正确运行。

此时我们要实现的效果已经完成，但是打包后分离出来的css文件中我们的login.css代码并没有实现压缩，解决这个问题涉及到另一个插件，下回再谈 >_<