WebPack打包工具学习记录

nodejs环境安装好之后&＃xff0c;
&＃xff08;淘宝npm cmd命令行输入&＃xff1a;npm install -g cnpm --registry&＃61;https://registry.npm.taobao.org&＃xff09;·安装webpack和webpack-cli
cnpm install –save-dev webpack
cnpm install –save-dev webpack-cli

引用地址&＃xff1a;https://www.cnblogs.com/sylvia-Camellia/p/9970718.html

这里的参数–save是要保存到package.json中&＃xff0c;dev是在开发时使用这个包&＃xff0c;而生产环境中不使用。
开发环境and生产环境&＃xff1a;
开发环境&＃xff1a;在开发时需要的环境&＃xff0c;这里指在开发时需要依赖的包。
生产环境&＃xff1a;程序开发完成&＃xff0c;开始运行后的环境&＃xff0c;这里指要使项目运行&＃xff0c;所需要的依赖包。

碰到问题&＃xff1a;

·错误记录&＃xff1a;
【1】WARNING in configuration
The &＃39;mode&＃39; option has not been set, webpack will
is value. Set &＃39;mode&＃39; option to &＃39;development&＃39; or
for each environment.
You can also set it to &＃39;none&＃39; to disable any def
://webpack.js.org/concepts/mode/ERROR in multi ./app/main.js public/bundle.js
Module not found: Error: Can&＃39;t resolve &＃39;public/b
odejs\node_global\node_modules\webpack\jqueryDem&＃64; multi ./app/main.js public/bundle.js main[1]·错误原因&＃xff1a;没有设置webpack的模式&＃xff0c;是生产还是开发&＃xff08;production or development&＃xff09;
·解决办法&＃xff1a;执行命令&＃xff1a;webpack --mode&＃61;production或者webpack --mode&＃61;development

【2】
·ERROR in Entry module not found: Error: Can&＃39;t resolve &＃39; es\nodejs\node_global\node_modules\webpack\j
·错误原因&＃xff1a;当前的webpack版本是最新的&＃xff0c;原先的这个命令&＃xff08;webpack app/main.js public/bundle.js &＃xff09;用不了&＃xff0c;需更新。
·解决办法&＃xff1a;&＃xff0c;命令更新为&＃xff1a;webpack app/main.js -o public/bundle.js

【3】
&＃39;webpack-dev-server&＃39; 不是内部或外部命令&＃xff0c;也不是可运行的程序 或批处理文件。
处理方法&＃xff1a;
将项目里的“node_modules”文件夹删除&＃xff0c;然后在cmd中cd到项目目录&＃xff0c;依次运行命令&＃xff1a;npm install和npm run build&＃xff0c;最后运行npm run dev后项目成功运行。

其他问题见引用网址。

入门操作教程&＃xff1a;

https://www.runoob.com/w3cnote/webpack-tutorial.html?tdsourcetag&＃61;s_pcqq_aiomsg

Webpack使用配置文件进行打包&＃xff0c;出错。

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.- configuration.module has an unknown property &＃39;loaders&＃39;. These properties are valid:object { defaultRules?, exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, strictExportPresence?, strictThisContextOnImports?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp? }-> Options affecting the normal modules (&＃96;NormalModuleFactory&＃96;).

解决办法如下&＃xff1a;https://blog.csdn.net/lqlqlq007/article/details/80091899

主要原因是版本问题&＃xff0c;新版本可能不支持一些配置项&＃xff0c;有新的配置格式。

我们需安装指定版本的Webpack&＃xff0c;或使用新的配置格式。

安装指定版本&＃xff1a;我们通常会用下面的命令下载所需插件&＃xff1a;
npm install angular-touch但下载的插件默认是最新版本的&＃xff0c;如果需要下载指定版本&＃xff0c;则在插件名称后需要加上&＃64;版本号&＃xff0c;如下&＃xff1a;
npm install angular-touch&＃64;1.4.6npm查看插件版本列表&＃xff1a;
npm view 插件名 versionsnpm 查看本地已安装插件版本&＃xff1a;
npm ls 插件名替换
npm un webpack -S && npm install webpack&＃64;3.0.6