详细步骤
1.安装webpack4
npm i webpack@4
2.安装webpack-cli
npm i webpack-cli
3.按需安装所需loader和plugin插件
npm i mini-css-extract-plugin html-webpack-plugin -D//安装html模板插件 与将css重新整合插件
-D 将包写入到开发模式中,package文件中可见,
npm i css-loader less-loader less -D//安装css less语法转化所需loader
npm i babel-loader @babel/preset-env @babel/core -D//安装es6语法转换所需loader与核心库
运行打包
npx webpack //打包完成后可在dist文件夹看见对应的打包文件
配置代码如下
let path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin");//html 模板打包插件
let MiniCssExtractPlugin = require('mini-css-extract-plugin');//css 打包后导入到新css文件
module.exports={
mode:"development",//开发模式
entry:'./src/js/index.js',//入口地址 **按自己项目情况配置**
output:{
path:path.resolve(__dirname +'/dist'),//路径必须是一个绝对路径
filename:"bundle.js"//打包后的文件名
},
devServer:{//服务器配置
port:"3000", //指定端口
contentBase:"./dist"//配置默认路径
},
module:{
rules:[//规则
{ test:/\.js$/,use:[
{
loader:"babel-loader",//使用loader
options:{
presets:[
"@babel/preset-env",//导入preset-env库 进行es6语法转换
]
},
},
]
},
{ test:/\.less$/,use:[//less 转换配置
// 'style-loader',//将css放入业内style
MiniCssExtractPlugin.loader,//通过插件将css放入新的css
'css-loader','less-loader']
},//转化less
{ test:/\.css$/, use:[ //css 转化配置
// 'style-loader',//引用css(解析import语法) style loader 将css放入style
MiniCssExtractPlugin.loader,//抽离为link 不通过style标签存放
'css-loader']
}
]//
},
plugins:[//插件
new HtmlWebpackPlugin({
template: './src/index.html',//模板地址 **html页面所在地址**
filename: "index.html",//导出html名称
minify:{
removeAttributeQuotes:false,//去除引号
collapseWhitespace:false,//代码单行
}
}),
new MiniCssExtractPlugin({//
filename:"main.css"//导出文件名
}),
],
};
配置webpack本地服务器
安装服务器插件
npm i webpack-dev-server -D
配置本地服务器
devServer:{//服务器配置
port:"3000", //指定端口
contentBase:"./dist"//配置默认路径
},
运行服务器并打开
npx webpack-dev-server
即可在 预览地址 http://localhost:3000/ 查看