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

webpack4.x开发环境配置

时间:2018-08-30 16:43:00      阅读:153      评论:0      收藏:0      [点我收藏+]

标签:run   建议   modules   文件   default   fun   工程   mode   初始化   

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

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

一、全局安装webpack

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

  1. npm install -g webpack

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

二、创建项目

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

  1. npm init

三、尝试打包出现提示

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

  1. function hello(str) {
  2. alert(str);
  3. }
  4. hello(‘hello world!‘);

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

  1. webpack hello.js bundle.js

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

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

翻译成中文:

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

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

四、安装webpack-cli

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

  1. npm install webpack-cli -D

这里-D参数和–save-dev的作用相同,只是一种简写而已。笔者这里安装完成后,显示webpack-cli版本是2.0.10。 我们在根目录再次输入:

  1. webpack hello.js bundle.js

很不幸,还是提示:

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

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

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

  1. npm uninstall webpack-cli
  2. npm install -g webpack-cli

五、设置模式

我们再次尝试打包:

  1. webpack hello.js bundle.js

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

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

翻译成中文:

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

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

  1. webpack --mode development

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

  1. 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文件仍然会报错,因此我们

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

现在如果我们再次执行

  1. 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指令,而是直接运行

  1. webpack --mode development

或者

  1. webpack --mode production

这样便能够实现将 ‘./src/index.js‘打包成 ‘./dist/main.js‘。 不过每次都要输入这个命令,非常麻烦,我们在 package.json中 scripts中加入两个成员:

  1. "dev":"webpack --mode development",
  2. "build":"webpack --mode production"

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

  1. npm run dev

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

七、配置其他参数

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

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

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

八、总结

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

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

配置步骤:

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

本文转载自:

https://blog.csdn.net/u012443286/article/details/79504289

webpack4.x开发环境配置

标签:run   建议   modules   文件   default   fun   工程   mode   初始化   

原文地址:https://www.cnblogs.com/myprogramer/p/9560709.html

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