webpack4.x安装和配置

一、全局安装webpack

npm install  webpack -g

二、创建项目

我们在合适位置新建一个文件夹wpk-test，用于存放我们的项目。 
命令行中定位到webpack-test文件夹下，输入以下命令进行项目的初始化：

npm init

这里，要求设置很多选项，可以按项目情况配置也可以不填直接回车。完成后，我们发现文件夹中增加了package.json文件，它用于保存关于项目的信息

三、安装webpack-cli

我们在项目中本地安装webpack-cli：

npm install webpack-cli -g

 

四、创建入口文件

这表明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文件的代码。

五、总结

 

配置步骤：

1、创建工程目录； 
2、初始化工程目录：npm init。 
3、全局安装webpack-cli。 
4、全局安装webpack。 
5、webpack –mode development或webpack –mode production进行打包，可在package.json中配置dev和build的脚本，便只需运行npm run dev/build，作用相同。