Webpack4 踩坑

1 安装

npm i webpack -g

同时要全局安装webpack-cli

npm i webpack-cli -g

2 初步尝试

但是此时在demo中使用webpack ./src/main.js -o ./dist/bundle.js会报错

image.png
原因是没有把全局安装的webpack链接到项目demo里来，执行以下命令

npm link webpack

image.png

再执行 webpack ./src/main.js -o ./dist/bundle.js

image.png

3.使用webpack.config.js文件

image.png
终端执行 webpack
image.png

4.使用webpack-dev-server实现自动打包

• 1.npm i webpack-dev-server -D 把这个工具安装的项目的本地依赖

• 2.安装完毕后，这个工具的用法，和webpack命令的用法，完全一样
  在package.json配置启动脚本
  

  image.png

• 3.由于我们是在项目本地安装的webpack-dev-server,所以无法把它当做脚本命令
  在终端下直接运行；（只有那些安装到全局 -g 的工具，才能在终端中正常执行）

• 4.注意webpack-dev-server这个工具如果想要正常运行，要求在本地项目中必须安装webpack
  完成以上步骤后
  

  image.png