安装与配置webpack

安装：

1、在vscode里打开新建的文件夹，直接在终端（powershell）上运行：npm init -y

2、配置国内加速：npm config set registry https://registry.npmmirror.com

3、运行：npm i webpack webpack-cli -D（官方文档用的是：--save-dev，等同于-D），然后手动删掉package.json文件代码里的^，这样可以使版本固定不更新

可运行以下代码，使版本不更新：npm config set save-prefix=””

以上就是安装了webpack的所有步骤，下面接着说运行

三种运行webpack的方式：（如果还没有新建文件，用1、2、3这三种方式运行webpack代码报错是正常的）

1、npx webpack

2、.\node_modules\.bin\webpack（也就是真实路径）

3、在package.json文件的script上加入"dev":"webpack",后，命令行运行npm run dev

现在运行会报错，因为还没有创建文件，现在来创建文件。

4、在根目录创建index.html文件和src文件夹，在src文件夹里面创建index.js，把package.json文的”main”: “index.js”删除并添加一行：”private”: true,

备注：npx webpack --help    //用来查看webpack的所有命令行的使用

           npx webpack -v        //可以用来查看webpack版本号

webpack有几个核心概念：Entry、Output、Loader、Plugin、Mode

5、在根目录下创建webpack.config.js，然后设置entry、output、mode（如何设置：直接去官网里面抄，然后修改）

在这里，entry与output可在webpack.config.js按照如下设置：

const path = require('path')   //引入path

module.exports = {

    entry: './src/index.js',     //设置入口

    output: {

        //这里的path是一个全局变量，所以需要引入，看前面的：const path = require('require')

        path: path.resolve(__dirname, 'dist'),  

        filename: 'main.js',     //代码的意思是：把index.js打包到dist目录下，文件名为：main.js

    }

};

也可以不设置entry和output，仅设置mode

以上设置均可在官网中的指南找到

mode里面production和development的区别（production尽量优化、压缩、混淆，development尽量方便开发、调试）

如果不设置mode就会出现以下警告：

设置mode 的方式有三种：（以production为例）

第一种：npx webpack --mode production

第二种：.\node_modules\.bin\webpack --mode production

第三种：使用npm，这里又有三种方式

方法一：在package.json文件中更改一行代码，如下：

然后执行：npm run dev

       方法二：直接运行：npm run dev -- --mode production

       方法三：在webpack.config.js中加入一行代码，如下：

       然后执行：npm run dev

在dist\main.js里面可以查看优化后的代码