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

Posted 大桥的前端日志

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack 4.0 配置方法以及错误解决相关的知识,希望对你有一定的参考价值。

选取一个空目录来试验

全局安装webpack4.1之后

创建目录

mkdir webpacktest && cd webpacktes

初始化package.json

npm init -y;

然后文件目录中安装webpack

npm i [email protected] --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就是压缩了的。哈哈  很高兴吧

 


以上是关于webpack 4.0 配置方法以及错误解决的主要内容,如果未能解决你的问题,请参考以下文章

webpack 命令行报错“webpack” 不是内部或外部命令的解决方法

gulp/webpack运行sass报错解决方法

vue-cli构建项目npm install报错以及解决方法

JS--------SQL Server问题错误解决意外的终止输入Uncaught SyntaxError: Unexpected end of input解决办法

对scanner.close方法的误解以及无法补救的错误

练习webpack遇到的一些问题以及解决办法,供自己以后参考