写这篇文章的初衷在于,虽然网络上关于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.jsonscripts中加入两个成员:

"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可串联设置其他参数。

webpack4.x开发环境配置的更多相关文章

  1. 基于webpack4的react开发环境配置

    一.基础配置 1.init项目 mkdir react-webpack4-cook cd react-webpack4-cook mkdir src mkdir dist npm init -y 复制 ...

  2. Python开发环境配置

    好久没有写博客了,自从6月份毕业后,进入一家做书法.字画文化宣传的互联网公司(www.manyiaby.com),这段时间一直在进行前端开发,对于后端的使用很少了,整天都是什么html.css.jav ...

  3. Visual studio 通用开发环境配置:SDL,FFMPEG为例

    引言 每一个C++库的使用都是从开发环境的配置开始的,其实每个库的配置过程都是大同小异,总结下来有下面几个步骤: 下载库文件,这里假定是已经预先编译完成的. 配置库文件的包含目录(include)和库 ...

  4. AndroidStudio开发环境配置-Windows

    Android Studio开发环境配置-Windows 最近突发奇想,开始研究Android开发.开始时使用Eclipse作为开发IDE,结果各种不好使,首先下载和安装SDK,以及不同版本的Imag ...

  5. WIN10下java8的开发环境配置与第一个java程序

    一.开发环境配置 1.在官网上下载jdk-8u111-windows-x64.exe 2.运行安装包,可以自定义安装路径 3.进入环境变量设置: 计算机右键-->属性-->高级系统设置-- ...

  6. Mac下golang开发环境配置

    go语言在开发效率和运行效率中的优势让很多人青睐,所以有倾向打算转向go语言的开发. 下面介绍在Mac OS X中golang的开发环境配置. 1.安装brew brew是一个mac下的由ruby开发 ...

  7. win7 x64 vs2010 directShow开发环境配置

    近来工作需要,要用dirrectShow写一个视频播放的demo验证自己的想法.开发环境配置了好久都没有成功,最后终于弄完,现在记录下来,以后有同学遇到同样问题,可以以此法解决. windows SD ...

  8. 基于Eclipse的Hadoop应用开发环境配置

    基于Eclipse的Hadoop应用开发环境配置 我的开发环境: 操作系统ubuntu11.10 单机模式 Hadoop版本:hadoop-0.20.1 Eclipse版本:eclipse-java- ...

  9. XMPP开发环境配置

    首先配置XMPP开发环境配置需要的软件 先安装xampp-osx-1.8.3-5-installer.dmg 安装成功后launchpad里会多出一个XAMPP(其他),点开里面的manager-os ...

随机推荐

  1. Pytest系列(9) - 参数化@pytest.mark.parametrize

    如果你还想从头学起Pytest,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1690628.html 前言 pytest允许在多个级别启 ...

  2. Java中如何通过try优雅地释放资源?

    时间紧迫,长话短说,今天,小明给大家同步一个知识点,使用try-with-resources来优雅地关闭资源. 1. 背景 其实,在JDK 7就已经引入了对try-with-resources的支持, ...

  3. node.js代码

    // 1. 引入 express var express = require('express'); var formidable = require('formidable'); var mysql ...

  4. 【php】正则表达式

    一.生活当中的正则表达式: a)Notepad++.word等这些具有编辑功能的软件,都具有一个查找.替换的功能,这个功能,其实就属于正则模式的一种匹配.替换:包括windows当中可以实现的查找,也 ...

  5. Mac下Web切图常用PS快捷命令

    Mac下 Z 放大镜 双击放大镜   图片会回到100%大小 C 切片工具 B 画笔    alt 在B模式下 吸取颜色 M   选区(默认) 点击第二次M   矩形选区 可以固定大小 shift+c ...

  6. ADB教程

    ADB教程 查看当前pc端连接多少设备 adb devices  adb连接android设备  adb connect  [192.168.3.113]  断开连接  adb disconnect  ...

  7. go 闭包函数

    一.什么是闭包函数? 二.匿名函数可以被赋值给变量并作为值使用: package main import "fmt" func main(){ f() } func f(){ fo ...

  8. MySQL入门,第二部分,必备基础知识点

    一.数据类型 日期和时间数据类型 date 字节 日期,格式:2014-09-18 日期和时间数据类型 time 字节 时间,格式:08:42:30 日期和时间数据类型 datetime 字节 日期时 ...

  9. Linux服务器架设篇,Windows中的虚拟机linux上不了外网怎么办?

    1.将电脑的网线口直连路由器内网接口(确保该路由器可以直接正常上网,切记不可以使用宽带连接和无线网连接). 2.在实体机电脑可以上网的前提下,在命令框窗口输入 ipconfig 3.记录下电脑以太网的 ...

  10. ENVI 安装

    本文转自https://jingyan.baidu.com/article/2d5afd69d50e9585a2e28e37.html  但对该文有所补充,建议看本文,本文更详细. ENVI5.3安装 ...