webpack第一次接触

zhgc

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

zhgc

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"})
   
5. 
   
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.
   
4. 
   
5. + webpack-cli@3.3.11
   
6. added 204 packages from 129 contributors in 17.517s
   

复制代码

zhgc

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
   
2. 
   
3. 或
   
4. 
   
5. webpack --mode production

复制代码