webpack4.xx使用

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"