标签：run 建议 modules 文件 default fun 工程 mode 初始化
写这篇文章的初衷在于，虽然网络上关于webpack的教程不少，但是大多已经过时，由于webpack版本更新后许多操作变化很大，很多教程的经验已经不适合。当我们使用npm安装webpack时，若不指定webpack的版本，将默认安装最新版，笔者测试时默认安装的是4.1.1，并不能照搬老教程的方法。为此，笔者进行了最新版配置的探索，使用的是windows操作系统，如果你的是webpack4.x版本，可参考进行配置。
注意：本文并不是直接把正确步骤放上去，而是分析了各种报错情况及原因，文章的步骤显得绕弯子。如果仅仅想看正确步骤，建议直接看第八点的配置步骤再返回查找各步骤的操作。
如果我们按照旧版本的安装方式，直接使用npm全局安装webpack，我们预期全局安装webpack后，便能在命令行中使用webpack指令。我们在命令行输入：
npm install -g webpack当执行该操作后，便在 C:\Users\你的用户名\AppData\Roaming\npm\node_modules创建了 webpack文件夹，里面存储了刚刚全局安装的webpack模块。
我们在合适位置新建一个文件夹webpack-test，用于存放我们的项目。 命令行中定位到webpack-test文件夹下，输入以下命令进行项目的初始化：
npm init我们在项目根目录新建一个文件 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：
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-clinpm install -g webpack-cli我们再次尝试打包：
webpack hello.js bundle.js看样子似乎是可以运行了，但又出现了新的提示：
WARNING in configurationThe ‘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.jsModule 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可串联设置其他参数。本文转载自：
https://blog.csdn.net/u012443286/article/details/79504289
标签：run 建议 modules 文件 default fun 工程 mode 初始化
原文地址：https://www.cnblogs.com/myprogramer/p/9560709.html
