1、打包css文件
安装css-loader(打包css文件) style-loader(将打包后的结果添加到html中)
npm install css-loader style-loader --save-dev
在配置文件中添加:
{
test: /\.css$/, //检测是否是css文件
use: ["style-loader", "css-loader"], //用css-loader处理文件,再用style-loader插入到html
},
2、html打包
安装html-webpack-plugin插件
npm install html-webpack-plugin --save-dev
然后在配置文件中引入:
//引入html-webpack-plugin
const HtmlWebpackPlugin = require("html-webpack-plugin");
配置:
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html",//打包的html文件
filename:'index.html',//打包后的文件名称
}),
],
3、打包less文件
安装 npm install less less-loader --save-dev
配置:
{
test:/\.less$/,
use:["style-loader", "css-loader",'less-loader']
}
4、打包scss文件
安装 npm install sass-loader node-sass --save-dev
配置:
{
test:/\.scss$/,
use:["style-loader", "css-loader",'sass-loader']
}