①初始化工程 :npm init
②下载安装webpack : npm install -g webpack webpack-cli
安装 css 打包:npm install --save-dev style-loader css-loader
③ 查看版本 :webpack -v
④ 创建 webpack.config.js 文件在根路径下 配置如下:
const path = require('path'); // Node.js 内置模块
module.exports ={
entry : "./src/main.js", //配置入口文件 ./src/main.js 是你写的入口文件
output:{
path: path.resolve(__dirname,'./dist'),//输出路径,_dirname:当前文件所在路径
filename: 'bundle.js' //输出文件 打包后的生成文件
},
module:{
rules:[
{
test:/\.css$/, //打包规则应用到以css结尾的文件上
use:['style-loader','css-loader']
}
]
}
}
⑤ 使用命令打包:
webpack #黄色警告
或者
webpack --mode=development #开发环境
webpack --mode=production #生产环境