项目概览
当前目录结构:
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代码并没有实现压缩,解决这个问题涉及到另一个插件,下回再谈 >_<