webpack 的基本使用

在项目中安装和配置 webpack

• 安装webpack 相关包,命令 ： npm install webpack webpack-cli -D
• 在项目根目录创建一个名为 weback.config.js 的webpack 配置文件
• 在 webpack 的配置文件中，初始化基本配置 ：

module.exports ={
    mode : 'development'  // mode 用来指定构建模式
}

• 在 package.json 配置文件中的scripts 节点下，新增dev脚本如下 ： 

"script" : {
    "dev" : "webpack"  // script 节点下的脚本，可以通过 npm run 执行
}

• 在终端运行 npm run dev 命令，启动webpack 进行项目打包
• 配置打包的入口与出口

        webpack 的 4.x 版本中默认约定 ： 

1. 打包的入口文件为 src => index.js
2. 打包的输出文件为 dist => main.js

如果需要修改打包的入口和出口文件路径，可以在 webpack.config.js 中配置如下信息 ：

const path = require('path');
module.exports ={
    entry : path.join(__dirname,'./src/index.js')  // 打包入口文件路径
    output : {
        path : path.join(__dirname,'./dist'),
        filename : 'bundle.js'  // 输出文件的名称
}
}

• 配置 webpack 的自动打包功能

1. 运行 npm install webpack-dev-server -D 命令，安装支持项目自动打包的工具。
2. 修改 package.json => scripts 中的 dev 命令如下

   "script" : {
       "dev" : "webpack-dev-server"   // script 节点下的脚本，可以通过npm run 执行
   }

3.  将 src => index.html 中script 脚本的引用路径，修改为 ‘/buldle.js’
4. 运行 npm run dev 命令，重新进行打包

注：关于 webpack 配置 webpack-dev-server 报错问题。Error: Cannot find module 'webpack-cli/bin/config-yargs'

原因 ： webpack-cli 与 webpack-dev-server 版本的不兼容。

当前版本

• webpack -v —— "^5.1.3"
• webpack-cli -v —— "^4.1.0"
• webpack-dev-server -v —— "^3.11.0"

解决方法 ：

降低 webpack-cli 的版本

npm install webpack-cli@3.3.12 -D

安装完成之后 再执行 npm run dev