先创建一个文件夹,然后点这个文件夹右键选择在终端打开,执行npm init命令创建包名作者名之类的,完事之后在总文件夹上再执行npm install webpack webpack-cli __save_devc下载webpack插件,在package.json的scripts里面添加一个'build':"webpack",然后在总文件夹上创建一个html文件,再创建一个项目文件夹src,src里面创建一个js文件当做入口,暂定为main.js,src上再创建一个js文件夹放所有的js文件,然后在总文件夹创建一个webpack.config.js文件,在webpack.config.js上编辑,
let path=require('path') //引入path模块
let htmlpackplu=require('html-webpack-plugin')//引入HTML模块
let htmlpack=new htmlpackplu({
template:'./index.html', //html文件路径
filename:'index.html' //打包后的名字
})
module.exports={
entry:'./src/main.js', //入口文件
output:{ //打包完成后的选项
publicPath:"./", // 设置静态路径
filename:'okpack.js', //打包之后的js文件名
path:path.resolve(__dirname,'wenjianjia') //两个参数,第一个是打包后的文件夹存放位置,__dirname代表根目录,第二个代表生成的新的js文件所在的文件夹的路径
},
plugins:[htmlpack,vueplugins], //打包html所需要的插件
module:{
rules:[
{
test:/\.css$/, //查找所有的css文件
use:['style-loader','css-loader'] //需要用到的插件,下载命令为npm i style-loader css-loader
}, //这里面写的是打包css文件所用到的东西
{
test:/\.(jpg|png|gif)&/, //查找所有图片
loader:"url-loader",// 打包图片需要用到 url-loader file-loader
options:{
limit:80*1024 //打包完图片大小限制
}
},{
test:/\.html$/,
// 处理html中图片问题,负责引入从而可以时img标签加载图片
loader:"html-loader"
},
]
}
}
css文件打包的话还需要在main.js这个入口文件上先用import 'css文件路径',这个方法导入,然后在终端再运行npm run build就可以了