webpack4.x开发环境配置详解


Posted in Javascript onAugust 04, 2018

本文实例讲述了webpack4.x开发环境配置方法。分享给大家供大家参考,具体如下:

写这篇文章的初衷在于,虽然网络上关于webpack的教程不少,但是大多已经过时,由于webpack版本更新后许多操作变化很大,很多教程的经验已经不适合。当我们使用npm安装webpack时,若不指定webpack的版本,将默认安装最新版,笔者测试时默认安装的是4.1.1,并不能照搬老教程的方法。为此,笔者进行了最新版配置的探索,使用的是windows操作系统,如果你的是webpack4.x版本,可参考进行配置。

注意:本文并不是直接把正确步骤放上去,而是分析了各种报错情况及原因,文章的步骤显得绕弯子。如果仅仅想看正确步骤,建议直接看第八点的配置步骤再返回查找各步骤的操作。

一、全局安装webpack

如果我们按照旧版本的安装方式,直接使用npm全局安装webpack,我们预期全局安装webpack后,便能在命令行中使用webpack指令。我们在命令行输入:

npm install -g webpack

当执行该操作后,便在C:\Users\你的用户名\AppData\Roaming\npm\node_modules创建了webpack文件夹,里面存储了刚刚全局安装的webpack模块。

二、创建项目

我们在合适位置新建一个文件夹webpack-test,用于存放我们的项目。
命令行中定位到webpack-test文件夹下,输入以下命令进行项目的初始化:

npm init

这里,要求设置很多选项,可以按项目情况配置也可以不填直接回车。完成后,我们发现文件夹中增加了package.json文件,它用于保存关于项目的信息。

三、尝试打包出现提示

我们在项目根目录新建一个文件hello.js,并在其中输入代码:

function hello(str) {
  alert(str);
}
hello('hello world!');

然后,我们便可以满怀期待地尝试打包,在命令行输入:

webpack hello.js bundle.js

意思是将hello.js打包成另一个文件bundle.js。但很不幸,4.1.1版本会提示:

The CLI moved into a separate package:webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
->when using npm: npm install webpack-cli -D
->when using yarn: yarn add webpack-cli -D

翻译成中文:

CLI(命令行工具)已经转移到了一个单独的包webpack-cli中。
除了webpack自身外,请额外安装webpack-cli来使用CLI。
-> 使用npm安装:npm install webpack-cli -D
->使用yarn安装:yarn add webpack-cli -D

意思是,我们需要额外安装webpack-cli,否则便不能在命令行中使用webpack的相关命令。

四、安装webpack-cli

我们在项目中本地安装webpack-cli

npm install webpack-cli -D

这里-D参数和?save-dev的作用相同,只是一种简写而已。笔者这里安装完成后,显示webpack-cli版本是2.0.10。

我们在根目录再次输入:

webpack hello.js bundle.js

很不幸,还是提示:

The CLI moved into a separate package:webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
->when using npm: npm install webpack-cli -D
->when using yarn: yarn add webpack-cli -D

这表明我们本地安装webpack-cli后并没有起作用,在命令行中依然不能使用webpack命令。那么是什么地方出了问题呢?
我们不难想到,

旧版本的webpack中,webpack指令要能在命令行中使用,需要全局安装webpack,而不是本地安装,因此这里的webpack-cli也应该是同理。

我们卸载本地安装的webpack-cli,全局安装webpack-cli:

npm uninstall webpack-cli
npm install -g webpack-cli

五、设置模式

我们再次尝试打包:

webpack hello.js bundle.js

看样子似乎是可以运行了,但又出现了新的提示:

WARNING in configuration
The 'mode' option has not been set. Set  'mode' option to 'development' or 'production' to enable defaults for this enviroment.
ERROR in multi ./hello.js bundle.js
Module not found:ERROR:Can't resolve 'bundle.js' in 'C:/Users/你的用户名/Desktop/webpack-test'
@ multi ./hello.js bundle.js

翻译成中文:

配置警告:
“mode”选项尚未设置。将“mode”选项设为“development”或“production”以启用此环境的默认设置。
multi错误 ./ hello.js bundle.js
未发现模块:错误:无法解析'C:/Users/你的用户名/Desktop/webpack-test'中的bundle.js
@ multi ./hello.js bundle.js

这里提示我们存在的第一个问题是没有配置webpack的mode选项,默认有production和development两种模式可以设置,因此我们尝试设为development模式,在命令行输入:

webpack --mode development

我们看到进行了打包并显示了Hash、Version、Time、Build at信息,表明已经可以打包。不过,仍然有错误提示:

ERROR in Entry module not found:ERROR:Can't resolve './src' in 'C:/Users/你的用户名/Desktop/webpack-test'

翻译成中文:

未找到入口模块发生错误:错误:无法解析'C:/Users/你的用户名/Desktop/webpack-test'中的'./src'

六、创建入口文件

这表明webpack4.x是以项目根目录下的'./src'作为入口,但我们的项目中缺乏该路径,因此我们在根目录下创建src文件夹,事实上webpack4.x'./src/index.js'作为入口,单单创建src文件而没有index.js文件仍然会报错,因此我们

hello.js移动到'./src',并重命名为index.js

现在如果我们再次执行

webpack index.js bundle.js

会提示can.t resolve相关的错误。

原因是,webpack4.x的打包已经不能用webpack 文件a 文件b的方式,而是直接运行webpack --mode development或者webpack --mode production,这样便会默认进行打包,入口文件是'./src/index.js',输出路径是'./dist/main.js',其中src目录即index.js文件需要手动创建,而dist目录及main.js会自动生成。

因此我们不再按webpack 文件a 文件b的方式运行webpack指令,而是直接运行

webpack --mode development

或者

webpack --mode production

这样便能够实现将'./src/index.js'打包成'./dist/main.js'

不过每次都要输入这个命令,非常麻烦,我们在package.json中scripts中加入两个成员:

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

以后我们只需要在命令行执行npm run dev便相当于执行webpack --mode development,执行npm run build便相当于执行webpack --mode production

我们在根目录执行:

npm run dev

可以看到根目录下生成了dist目录,并且dist目录下生成了main.js文件,main.js文件已经打包了src目录下index.js文件的代码。

七、配置其他参数

我们如果需要配置webpack指令的其他参数,只需要在webpack ?mode production/development后加上其他参数即可,如:

webpack --mode development --watch --progress --display-modules --colors --display-reasons

当然,这也可以写入package.json的scripts之中。

八、总结

我们可以将以上探索进行整理总结,首先是注意事项:

1、webpack-cli必须要全局安装,否则不能使用webpack指令;
2、webpack也必须要全局安装,否则也不能使用webpack指令。
3、webpack4.x中webpack.config.js这样的配置文件不是必须的。
4、默认入口文件是./src/index.js,默认输出文件./dist/main.js。

配置步骤:

1、创建工程目录;
2、初始化工程目录:npm init。
3、全局安装webpack-cli。
4、全局安装webpack。
5、webpack ?mode development/production进行打包,可在package.json中配置dev和build的脚本,便只需运行npm run dev/build,作用相同。
6、在webpack ?mode development/production可串联设置其他参数。

希望本文所述对大家基于webpack的前端程序设计有所帮助。

Javascript 相关文章推荐
用JQuery 实现AJAX加载XML并解析的脚本
Jul 25 Javascript
JQUERY操作JSON实例代码
Feb 09 Javascript
javascript 广告后加载,加载完页面再加载广告
Nov 25 Javascript
如何确保JavaScript的执行顺序 之实战篇
Mar 03 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
Dec 29 Javascript
js中事件的处理与浏览器对象示例介绍
Nov 29 Javascript
JavaScript编程中的Promise使用大全
Jul 28 Javascript
JavaScript数据结构之二叉树的删除算法示例
Apr 13 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
Apr 25 Javascript
Vue Cli与BootStrap结合实现表格分页功能
Aug 18 Javascript
javascript实现超好看的3D烟花特效
Jan 01 Javascript
Node在Controller层进行数据校验的过程详解
Aug 28 Javascript
微信小程序实现收藏与取消收藏切换图片功能
Aug 03 #Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
Aug 03 #Javascript
mpvue跳转页面及注意事项
Aug 03 #Javascript
JavaScript高级函数应用之分时函数实例分析
Aug 03 #Javascript
mpvue小程序仿qq左滑置顶删除组件
Aug 03 #Javascript
JavaScript中call和apply方法的区别实例分析
Aug 03 #Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
Aug 03 #Javascript
You might like
什么是MVC,好东西啊
2007/05/03 PHP
PHP中利用substr_replace将指定两位置之间的字符替换为*号
2011/01/27 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
学习面向对象之面向对象的术语
2010/11/30 Javascript
js操作textarea方法集合封装(兼容IE,firefox)
2011/02/22 Javascript
分享一个asp.net pager分页控件
2012/01/04 Javascript
Raphael一个用于在网页中绘制矢量图形的Javascript库
2013/01/08 Javascript
javascript中的toFixed固定小数位数 简单实例分享
2013/07/12 Javascript
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
Avalonjs 实现简单购物车功能(实例代码)
2017/02/07 Javascript
JavaScript中重名的函数与对象示例详析
2017/09/28 Javascript
AjaxUpLoad.js实现文件上传
2018/03/05 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
2018/04/03 Javascript
基于mpvue的小程序项目搭建的步骤
2018/05/22 Javascript
微信小程序自定义组件实现环形进度条
2020/11/17 Javascript
vue 查看dist文件里的结构(多种方式)
2020/01/17 Javascript
jQuery 选择器用法实例分析【prev + next】
2020/05/22 jQuery
[22:07]DOTA2-DPC中国联赛 正赛 iG vs Magma 选手采访
2021/03/11 DOTA
Python的装饰器模式与面向切面编程详解
2015/06/21 Python
python 拷贝特定后缀名文件,并保留原始目录结构的实例
2018/04/27 Python
利用python开发app实战的方法
2019/07/09 Python
为什么从Python 3.6开始字典有序并效率更高
2019/07/15 Python
Python浮点型(float)运算结果不正确的解决方案
2020/09/22 Python
如何用Python进行时间序列分解和预测
2021/03/01 Python
pycharm配置安装autopep8自动规范代码的实现
2021/03/02 Python
eBay加拿大站:eBay.ca
2019/06/20 全球购物
巴西葡萄酒商店:Divvino
2020/02/22 全球购物
Blue Nile中国官网:全球知名的钻石和珠宝网络零售商
2020/03/22 全球购物
电脑教师的教学自我评价
2013/11/26 职场文书
木工主管岗位职责
2013/12/08 职场文书
会计专业自我鉴定范文
2013/12/29 职场文书
2014年父亲节活动方案
2014/03/06 职场文书
理发店策划方案
2014/06/05 职场文书
《平行四边形的面积》教学反思
2016/02/16 职场文书
公司晚会主持词
2019/04/17 职场文书
MySQL InnoDB ReplicaSet(副本集)简单介绍
2021/04/24 MySQL