码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-03-06 23:24:36      阅读:295      评论:0      收藏:0      [点我收藏+]

标签:空目录   需要   env   文件目录   文件   package   webpack   错误   打包   

选取一个空目录来试验

全局安装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就是压缩了的。哈哈  很高兴吧

 

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

标签:空目录   需要   env   文件目录   文件   package   webpack   错误   打包   

原文地址:https://www.cnblogs.com/qqfontofweb/p/8516882.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!