WebPack打包工具学习记录

nodejs环境安装好之后,
(淘宝npm cmd命令行输入:npm install -g cnpm --registry=https://registry.npm.taobao.org)

·安装webpack和webpack-cli
cnpm install –save-dev webpack
cnpm install –save-dev webpack-cli

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

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

碰到问题:

·错误记录:
【1】WARNING in configuration
The 'mode' option has not been set, webpack will
is value. Set 'mode' option to 'development' or
for each environment.
You can also set it to 'none' to disable any def
://webpack.js.org/concepts/mode/

ERROR in multi ./app/main.js public/bundle.js
Module not found: Error: Can't resolve 'public/b
odejs\node_global\node_modules\webpack\jqueryDem
 @ multi ./app/main.js public/bundle.js main[1]
 
·错误原因:没有设置webpack的模式,是生产还是开发(production or development)
·解决办法:执行命令:webpack --mode=production或者webpack --mode=development

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

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

其他问题见引用网址。

入门操作教程:

https://www.runoob.com/w3cnote/webpack-tutorial.html?tdsourcetag=s_pcqq_aiomsg

Webpack使用配置文件进行打包,出错。

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module has an unknown property 'loaders'. 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 (`NormalModuleFactory`).

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

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

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

安装指定版本:

我们通常会用下面的命令下载所需插件:
npm install angular-touch

但下载的插件默认是最新版本的,如果需要下载指定版本,则在插件名称后需要加上@版本号,如下:
npm install [email protected]

npm查看插件版本列表:
npm view 插件名 versions

npm 查看本地已安装插件版本:
npm ls 插件名

替换
npm un webpack -S && npm install [email protected]

猜你喜欢

转载自blog.csdn.net/qq_38261174/article/details/91575293