06.webpack打包工具安装教程

1…webpack安装和配置（4.x）

• 全局安装webpack

npm install  webpack -g

• 查看安装是否成功：查看版本

webpack --version

2.创建项目

• 在合适的位置创建一个新的文件夹wpk,用于存放我们的项目
• 切换到我们刚才创建的wpk文件夹下，进行项目初始化

npm init

备注：这里有很多选择项，执行完成后查看相关信息是否创建正常

3.安装webpack-cli

• 我们在项目中本地安装webpack-cli,记住是在刚才创建的项目目录中

npm install webpack-cli -g

4.创建入口文件

• webpack4.x是以项目根目录下的’./src’作为入口，因此我们在根目录下创建src文件夹，事实上webpack4.x以’./src/index.js’作为入口，单单创建src文件而没有index.js文件仍然会报错，因此我们将hello.js移动到’./src’，并重命名为index.js。
  打包命令：
  直接运行

webpack --mode development或者webpack --mode production

• 这样便会默认进行打包，入口文件是’./src/index.js’，输出路径是’./dist/main.js’，其中src目录即index.js文件需要手动创建，而dist目录及main.js会自动生成。
  这样便能够实现将’./src/index.js’打包成’./dist/main.js’。 不过每次都要输入这个命令，非常麻烦，我们在package.json中scripts中加入两个成员：

"dev":"webpack --mode development",
 "build":"webpack --mode production"

• 以后我们只需要在命令行执行npm run dev便相当于执行webpack --mode development，执行npm run build便相当于执行webpack --mode production。
  我们在根目录执行：

npm run dev

• 可以看到根目录下生成了dist目录，并且dist目录下生成了main.js文件，main.js文件已经打包了src目录下index.js文件的代码。