webpack 4.0 配置方法以及错误解决

选取一个空目录来试验

全局安装webpack4.1之后

创建目录

mkdir webpacktest && cd webpacktes

初始化package.json

npm init -y；

然后文件目录中安装webpack

npm i webpack@next --save-dev  @next我也不知道是什么意思

安装cli工具

npm i webpack --save-dev

再在package.json中配置script

"script":{

　　"build":"webpack"

}

这个时候直接运行webpack肯定是会报错的。之前的版本需要webpack.congfig.js里面配置一大堆东西；

现在不需要了

直接建立你想要的文件

例如./src/index.js

随笔写几句代码  console.log(‘new webpack 4.0 is so easy‘);

npm run build

可以看到直接打包好了放在./dist/main.js中

index.js运行结果和main.js一样。说明咱们的操作是对的；庆祝下吧。

之前参考一些文章。例如 ：入门webpack这篇文章就够了；按照上面的步骤根本走不下来。

还遇到错误提示

WARNING in configuration
The ‘mode‘ option has not been set. Set ‘mode‘ option to ‘development‘ or ‘production‘ to enable defaults for this environment.

只需要在package.json中添加配置项：

"scripts": {

　　"dev": "webpack --mode development",

　　"build": "webpack --mode production"

}

然后npm run dev  这个时候dist里面的文件的不是压缩过的

但是npm run build 这个时候dist的main.js就是压缩了的。哈哈  很高兴吧