webpack的安装与使用（保姆级教程）

1.webpack的安装

1.1.在要安装webpack的目录下的终端cmd下初始化项目，输入以下指令

npm init [-y]//-y表示按默认信息初始化，去掉则会让你输入一些信息初始化，无关紧要

然后目录下会生成一个package.json文件，里面包含一些项目的相关信息

1.2.输入安装指令

局部安装：（推荐）

//安装webpack，如果需要安装指定版本则在后面加上'@版本号'，默认安装最新的
npm install  --save-dev webpack[@3.6.0]

npm install  --save-dev webpack-cli//安装webpack-cli

ps:

webpack-cli是一个命令行工具，允许我们运行webpack打包命令、初始化webpack配置文件等。通过webpack-cli，我们可以更加方便地管理webpack相关的任务。例如，可以使用webpack-cli来执行以下操作：

1. 初始化webpack配置文件：通过运行webpack-cli init命令，我们可以快速生成一个基本的webpack配置文件。

2. 运行webpack打包命令：使用webpack-cli，我们可以在命令行中直接执行webpack打包任务。

3. 其他命令：webpack-cli还提供了一些其他的命令，比如webpack-cli serve，用于启动开发服务器。

总之，webpack-cli让我们能够更加方便地使用webpack，提高我们的开发效率。

查看版本号：

webpack -v

假如没有出现版本号，而是出现了电脑配置信息的输入一下代码试试：

npm info webpack version

问题可参考下面链接：
webpack -v没有出现版本号，而是出现了电脑配置信息
可以查看到版本号说明webpack已经按装好了，此时package.json文件也会出现一个依赖：
（把安装想成maven引入依赖就很好理解了）

全局安装：

npm install -g webpack //全局安装webpack

备注：如果这样安装出现了提示安装webpack-cli，这是4.x的提示，如果不想安装webpack-cli需重新安装低版本webpack，不过一般webpack和webpack-cli都是会一起安装的，输入y回车安装就好。
另外：官方不太支持全局安装，会锁定版本，因此一般对项目目录局部安装。

至此，webpack和webpack-cli安装完成。

2.webpack的使用

1.1.在项目的目录下新建webpack.config.js配置文件

格式基本固定，只需稍加修改

const path = require('path')//Node.js内置模块

//当使用webpack打包的时候，webpack会自动去项目根目录下寻找webpack.config.js这个配置文件，加载里面的配置，根据配置选项进行打包
module.exports = {
//打包的入口js文件，也就是说你需要在这个main.js文件中引入其他需要一起打包的js文件
entry: './src/main.js',
output: {
filename: 'result.js',//输出的文件，文件名自定义
    path: path.resolve(__dirname, './dist'), //输出文件的路径，可以不用改
    filename: 'result.js'
    }
}

2.2.创建入口js文件

js文件里面引入其他js文件：

//这个是mian.js文件（可自定义文件名）
require("./01.js")//.js可以省略
require("./02.js")
require("./03.js")

众所周知，webpack是可以连着css文件和js文件一起打包的，假如要把css文件一起打包，就还需要安装一个依赖，css的加载器，webpack本身只能处理js文件，要想处理css资源，还需要一个loader转换器

2.3.安装css的加载器

很简单，直接输入下面命令：

npm install --save-dev style-loader css-loader

此时package.json文件多了两个依赖

然后需要修改一下webpack.config.js配置文件

const path = require('path')
module.exports = {
entry: './src/main.js',
output: {
filename: 'bundle.js',
    path: path.resolve(__dirname, './dist'), 
    filename: 'bundle.js'
    },
    //新添加了如下代码，上面的小逗号别漏了，格式是固定的，不用改
    module: {
        rules: [
            {
                test: /\.css$/,//打包规则运用到以css为结尾的文件上
                use: ['style-loader','css-loader']
            }
        ]
    }
}

2.3.然后就可以执行webpack的打包命令了

ps：

因为可能会涉及es6语法，打包时可能会失败：
方法1：可以用babel将es6语法的js文件转换成es5语法的js文件，再进行打包，实际开发其实也是需要转换成es5再打包部署的，因为这样浏览器的兼容性更好
方法2：假如js文件用了es6语法的，把引入的js文件的后缀名改成.mjs就可以打包了（自己没试过不知道可不可以）
方法3：es6打包到底会不会失败其实我也没试过，假如有遇到问题的猿友就试一下上面两个方法，推荐第一个。

webpack的打包命令

webpack //有黄色警告
webpack --mode=development//没有警告

关于黄色警告，其实仔细解读一下英语，就想叫你在后面加development或者production，如下：

webpack --mode=development
开发环境，打包的速度快，体积大，打包的代码多行显示，方便人看。
webpack --mode=production
上线环境，打包速度较慢，但是打包的体积小，压缩了，打包的代码单行显示，方便计算机看。

三个命令其实没有太大差别，因为也知道，警告就是等于不用管[dogo]

至此打包就结束了

另外说一下另一个打包方法，

在package.json文件加上
"script": {
    ...
    ...
	"div": "webpack --mode=development"
}
执行：npm run dev 就可以打包了
类似于给命令起了个名字，直接调用名字吧

最后总结：

warn=info>error