webpack4.x学习笔记(1)

本文是以webpack4.x做的记录

基本的打包操作:

步骤一:

mkdir demo      // 在当前目录下创建一个文件夹 名字是:demo

cd demo          //  从当前目录下进入到demo文件中去

npm init -y      // -y跳过提问环节,直接生成一个 package.json文件

步骤二:

安装 webpack 和webpack-cli

命令: npm install webpack   webpack-cli -D   // 可以一起安装

或者分两次安装也是可以的

eg: 

npm install webpack -D

npm install webpack-cli -D

完成了以上步骤就可以进行打包工作了。

2.jpg


注意:

webpack4.x的打包已经不能用
webpack 文件a 文件b

要用到以下命令:

1: webpack --mode development (未压缩版)

2: webpack --mode production(压缩版的)

webpack4.x中,打包的时候,默认情况下会将src下的入口文件(index.js)进行打包,

webpack会自动查找项目中src目录下的index.js文件,然后进行打包,生成一个dist目录并存在一个打包好的main.js文件

如果没有创建dist文件夹,打包之后会自动创建出dist文件夹和打包之后的main.js文件。

注意:如果没指定任何模式,默认是production模式

当然,我们一般会在package.json文件去做一些配置

3.jpg

npm run build 执行的就是 webpack --mode production

npm run dev 执行的就是    webpack --mode development


通常,我们还是会在webpack.config.js文件中去做 一些配置

4.jpg

执行打包命令:

6.jpg

产生的结果是:

5.jpg

此时项目文件下,就会产生一个aa的文件夹,并且有一个打包好的js文件:a.js文件


以上就是webpack4.x打包的基本操作,后续再总结。。。。


猜你喜欢

转载自blog.51cto.com/11871779/2170916