深圳全飞鸿

标题: webpack第一次接触 [打印本页]
作者: zhgc    时间: 2020-2-18 15:43
标题: webpack第一次接触

文档：
https://www.w3cschool.cn/webpackguide/

作者: zhgc    时间: 2020-2-18 15:57
F:\node_test>npm config set registry https://registry.npm.taobao.org

F:\node_test>npm config get registry
https://registry.npm.taobao.org/

F:\node_test>npm install webpack --save-dev
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN node_test@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ webpack@4.41.6
added 322 packages from 197 contributors in 43.626s

3 packages are looking for funding
  run `npm fund` for details


安装后，执行webpack命令，提示不认识

方法是安装一个全局的：
  1. F:\node_test>npm i webpack -g
  2. C:\Users\john\AppData\Roaming\npm\webpack -> C:\Users\john\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js
  3. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\webpack\node_modules\fsevents):
  4. npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

  6. + webpack@4.41.6
  7. added 322 packages from 197 contributors in 32.91s
复制代码


再次运行
F:\node_test>webpack entry.js bundle.js
提示：Error: Cannot find module 'webpack-cli'


解决方案：
  1. F:\node_test>npm install webpack-cli -g
  2. C:\Users\john\AppData\Roaming\npm\webpack-cli -> C:\Users\john\AppData\Roaming\npm\node_modules\webpack-cli\bin\cli.js
  3. npm WARN webpack-cli@3.3.11 requires a peer of webpack@4.x.x but none is installed. You must install peer dependencies yourself.

  5. + webpack-cli@3.3.11
  6. added 204 packages from 129 contributors in 17.517s
复制代码



作者: zhgc    时间: 2020-2-18 16:41
webpack4 默认不需要再创建webpack.config.js来配置打包的入口和出口；

默认情况下，

入口为./src/index.js文件

出口为./dist/main.js文件


确保入口文件/src/index.js位置正确，在项目根目录下运行命令：

webpack
即可完成打包。

此时可以看到项目目录下的dist文件夹下就会打包好的文件main.js；

在需要引入的html文件index.html中正确引入即可；
在这里插入图片描述

也可以使用以下命令手动指定：
  1. webpack ./src/index.js --output-filename ./dist/main.js --output-path . --mode development
复制代码


或者

  1. webpack ./src/index.js -o ./dist/main.js --mode development
复制代码


注意：
最后的--mode development 是指定开发模式，不指定会报警告；

还有一种mode是--mode production指定生产模式，此模式下打包的js文件会进行压缩，前者则不会；

所以上面直接执行webpack会提示警告，关闭警告可通过以下命令打包：

  1. webpack --mode development

  3. 或

  5. webpack --mode production
复制代码




欢迎光临 深圳全飞鸿 (http://www.nagomes.com/disc/) Powered by Discuz! X3.2