项目结构
webpackSeparateFile
│ package-lock.json
│ package.json
│ webpack.config.js
└─src
index.css
index.js
index.css
安装依赖
在webpackSeparateFile目录下运行
npm i webpack webpack-cli html-webpack-plugin css-loader mini-css-extract-plugin --save-dev
webpack配置文件
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exprots = {
mode:'development',
entry:'./src/index.js',
output:{
path:resolve(__dirname,'dist'),
filename:'[name].build.js'
},
module:{
rules:[
{
// 匹配文件规则
test:/\.css$/i,
// 使用的loader
use:[MiniCssExtractPlugin.loader,'css-loader']
}
]
},
plugins:[new HtmlWebpackPlugin(),new MiniCssExtractPlugin({filename:"[name].css"})]
}
plugin
mini-css-extract-plugin:用于将css输出成文件,其中的loader属性,接收css-loader处理后的结果并生成文件
index.js文件
import "./index.css";
/**
其他逻辑代码
*/
打包命令
- 方式一:在webpackSeparateFile目录下运行
webpack --config ./webapck.config.js
- 方式二:在package.json文件的scripts属性新增如下命令
{
...
"scripts":{
"build":"webpack --config ./webpack.config.js"
}
...
}
修改保存后,在webpackSeparateFile目录下运行如下命令:
npm run build
打包后的目录
webpackSeparateFile
│ package-lock.json
│ package.json
│ webpack.config.js
├─dist
│ index.build.js
│ index.html
│ index.css
└─src
index.css
index.js