1：确保自己的电脑已经安装了node和Git软件
2：自己在盘里随便创建一个文件夹一般为英文(也就是你自己的项目名称)
3：在新创建好的文件夹里面右键点击调出git指令窗口在窗口里面输入如下指令：
1：npm install webpack -g
2: npm install webpack-cli -g
3: npm init -y
4: npm install webpack --save-dev
5 npm install html-webpack-plugin （html编译插件）
6：npm install clean-webpack-plugin
6.1 npm install webpack-dev-server (服务插件)
6.2 npm install style-loader css-loader （css打包插件）
6.3 npm install file-loader url-loader (文件图片打包插件)
6.4 npm install less-loader (less打包插件)
6.5 npm install sass scss --save-dev （sass scss打包插件）
6.6 npm install sass-loader nade-sass (sass打包插件)
6.7 npm install purifycss-webpack purify-css （css优化插件）
7：把项目拖进编辑器并创建webpack.rules.js和webpack.config.js
webpack.rules.js比如是分写的打包模块 这就为导出模块webpack.config.js就为导入模块
例如 webpack.rules.js代码如下：
const rules=[
{
test:/\\.css$/,
use:[\'style-loader\',\'css-loader\'] //css打包
},
{
test:/\\.(png|jpg|gif)$/, //图片打包
use:[
{
loader:\"url-loader\",
options:{
limit:1000
}
}
]
},
{
test:/\\.less$/, //less打包
use:[
\'style-loader\',\'css-loader\',\'less-loader\'
]
},
{ //sass scss打包
test:/\\.(scss|sass)$/,
use:[
\'style-loader\',\'css-loader\',\'sass-loader\'
]
}
]
module.exports=rules //模块导出
webpack-config.js代码如下：
const path=require(\"path\");
const WebpackHtmlPlugin = require(\'html-webpack-plugin\');
const CleanwebpackPlugin=require(\'clean-webpack-plugin\'); //不用每一次去删除dist文件夹会自动删除
const Purify=require(\'purifycss-webpack\'); //css优化去重复无效代码
const glob=require(\'glob\'); //css优化
const rules=require(\'./webpack.rules.js\'); //导入分写的js模块
const test=require(\'./src/test.js\'); //自己新建写的js导入
module.exports={
entry:{ //导入模块
index:\'./src/index.js\',
index2:\'./src/index2.js\'
},
output:{ //导出模块
path:path.resolve(__dirname,\"dist\"),
filename:\"[name].js\"
},
plugins:[
new WebpackHtmlPlugin({
minify:{
collapseWhitespace:true, //清除空格
removeAttributeQuotes:true, //清除多余引号
removeComments:true //删除注释
},
title:\"tttttttt\", //打包出来的文件夹名字
template:\"./src/index.html\", //要打包的html文件路径
chunks:[\'index\'],
hash:true,
filename:\"index.html\" ,//要打包的文件夹名字
}),
new WebpackHtmlPlugin({
minify:{
collapseWhitespace:true, //清除空格
removeAttributeQuotes:true, //清除多余引号
removeComments:true //删除注释
},
title:\"ttttttt2\",
template:\"./src/index2.html\",
chunks:[\'index2\'],
hash:true,
filename:\"index2.html\"
}),
new CleanwebpackPlugin(), //不用每一次去删除dist文件夹会自动删除
new Purify({ //css优化去重去无效代码
paths:glob.sync(path.join(__dirname,\"src/*.html\"))
})
],
devServer:{ //开启服务器模块
contentBase:path.resolve(__dirname,\"dist\"),
host:\"localhost\",
port:8094,
open:true
}
,
module:{rules} //导入分写js模块
}
10：package.json scripts配置如下：
\"scripts\": {
\"build\": \"webpack --mode production\",
\"dev\":\"webpack-dev-server --mode production\"
},
11：要打包的html title处需配置
<title><%=htmlWebpackPlugin.options.title%></title>
12：执行命令进行打包 npm run build
13：开启本地服务npm run dev
版权声明
本文仅代表作者观点，不代表百度立场。
本文系作者授权百度百家发表，未经许可，不得转载。
