一、安装nodejs
1.从官网下载
二、通过npm安装webpack,webpack/cli
win:
npm install webpack -g
npm install webpack/cli -g
mac:
sudo npm install webpack -g
sudo npm install webpack/cli -g
//-g参数为全局安装 Linux和Mac必须用sudo权限,否则没有权限导致报错
//--save-dev为局部安装
三、简单配置webpack
1.在项目根目录下创建webpack.config.js!(名字不能错)
内容:
const path = require('path');//引用了nodejs的包,动态获取路径
module.exports = {
entry: './src/main.js',//入口
output: {
filename: 'bundle.js',//输出文件名称
path: path.resolve(__dirname, 'dist')//路径
}//出口
//以上的路径必须为绝对路径,否则报错!
}
2.在项目根目录下执行
npm init
可填写相应的信息。
如果不想填一路回车也可,此时可以在根目录下已经一个叫package.json
大致内容:
{
"name": "project",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"dependencies": {
"webpack": "^4.41.6",
"webpack-cli": "^3.3.11"
},
"devDependencies": {},
"scripts": {
//此处可以配置npm run xx,
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack" //npm run build
},
"author": "",
"license": "ISC"
}
使用npm run build的好处在于用的是局部webpack,可以避免与全局webpack版本冲突的问题。
坑1:webpack4.X不能再用webpack 入口.js 出口.js 方式打包