版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/buyueliuying/article/details/81045595
4.0前后的版本变化比较大,具体请看webpack4.0注意事项
我这里使用的是webpack 4.16.0
假设机器已安装npm
这里创建一个项目目录wp,目录结构如下
mkdir npmtest
cd npmtest
npm init
会显示
提示录入相关的信息,也可一路回车,最后yes,之后自动生成一个package.json文件
在wp目录下新增webpack.config.js文件,内容如下
const path = require('path');
module.exports = {
//入口文件
entry:'./src/main.js',
output:{
//将所有依赖的模块合并输出到一个bundle.js文件
filename:'bundle.js',
//输入文件都放到dist目录下
path:path.resolve(__dirname,'./dist'),
}
};
全局安装webpack
npm i -g webpack
4.0之后还需要安装webpack-cli了
npm i -g webpack-cli
到你的npm的目录的bin目录可以看到多了一个webpack和webpack-cli
分别建立软连接,本人机器的bin目录地址为/node-v8.11.3-linux-x64/bin
ln -s /node-v8.11.3-linux-x64/bin/webpack /usr/local/bin/webpack
ln -s /node-v8.11.3-linux-x64/bin/webpack /usr/local/bin/webpack
至此可以使用webpack命令
打包
#开发模式打包
webpack --mode development
要让页面跑起来还需要webpack-dev-server
npm i -g webpack-dev-server
建立软连接
ln -s /node-v8.11.3-linux-x64/bin/webpack-dev-server /usr/local/bin/webpack-dev-server
编辑package.json文件的scripts里添加一个快速启动webpack-dev-server服务的脚本
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --config webpack.config.js --mode development"
},
当执行 npm run dev 时 就会执行 webpack-dev-server –open –config webpack.config.js的命令
由于我使用的是虚拟机,所以ip需要修改一下
"dev": "webpack-dev-server --host 192.168.123.229 --port 8080 --open --config webpack.config.js --mode development"