webpack的的简单使用

孙肖宁

August 3, 2018

6762 views

No comments

4301 words

常用工具

webpack 能够处理 JS 文件的互相依赖关系；webpack 能够处理JS的兼容问题，把高级的、浏览器不是别的语法，转为低级的，浏览器能正常识别的语法

webpack的安装

运行npm i webpack -g全局安装webpack，这样就能在全局使用webpack的命令。
在项目根目录中运行npm i webpack -D安装到项目依赖中。

使用webpack进行打包

方式一：命令打包

webpack [要打包的文件的路径以及文件名] -o [打包后的文件路径以及文件名] 这是webpack4.1之后的打包命令。
webpack [要打包的文件的路径以及文件名] [打包后的文件路径以及文件名] 这是webpack4.1之前的打包命令。
方式二：配置文件

在项目根目录中创建webpack.config.js

由于运行webpack命令的时候，webpack需要指定入口文件和输出文件的路径，所以，我们需要在webpack.config.js中配置这两个路径：

 // 导入处理路径的模块
var path = require('path');

// 导出一个配置对象，将来webpack在启动的时候，会默认来查找webpack.config.js，并读取这个文件中导出的配置对象，来进行打包处理
module.exports = {
    entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件
    output: { // 配置输出选项
        path: path.resolve(__dirname, 'dist'), // 配置输出的路径
        filename: 'bundle.js' // 配置输出的文件名
    }
}

此时只需要执行webpack命令就可以打包了。
此时webpack做了以下几步：

首先，webpack 发现，我们并没有通过命令的形式，给它指定入口和出口；
webpack 就会去项目的根目录中，查找一个叫做 webpack.config.js 的配置文件；
当找到配置文件后，webpack 会去解析执行这个配置文件，当解析执行完配置文件后，就得到了配置文件中，导出的配置对象；
当 webpack 拿到配置对象后，就拿到了配置对象中，指定的入口和出口，然后进行打包构建。

webpack的实时打包构建

由于每次重新修改代码之后，都需要手动运行webpack打包的命令，比较麻烦，所以使用webpack-dev-server来实现代码实时打包编译，当修改代码之后，会自动进行打包构建。
运行cnpm i webpack-dev-server -D安装到开发依赖
安装完成之后，在命令行直接运行webpack-dev-server来进行打包，发现报错，此时需要借助于package.json文件中的指令，来进行运行webpack-dev-server命令，在scripts节点下新增"dev": "webpack-dev-server"指令，发现可以进行实时打包，但是dist目录下并没有生成bundle.js文件，这是因为webpack-dev-server将打包好的文件放在了内存中。如果在运行此命令的时候显示webpack-dev-server不是内部或外部命令就对webpack-dev-server进行全局安装npm i webpack-dev-server -g。

把bundle.js放在内存中的好处是：由于需要实时打包编译，所以放在内存中速度会非常快
这个时候访问webpack-dev-server可以使用--contentBase src指令来修改dev指令，指定启动的根目录,端口号，热更新等：
```
  "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
```

使用 webpack-dev-server 这个工具，来实现自动打包编译的功能的总结：

运行 npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖;
安装完毕后，这个工具的用法，和webpack 命令的用法，完全一样;
由于，我们是在项目中，本地安装的 webpack-dev-server ，所以，无法把它当作脚本命令，在powershell 终端中直接运行；（只有那些安装到全局 -g 的工具，才能在终端中正常执行）
注意： webpack-dev-server 这个工具，如果想要正常运行，要求，在本地项目中，必须安装 webpack
webpack-dev-server 帮我们打包生成的 bundle.js 文件，并没有存放到实际的物理磁盘上；而是，直接托管到了电脑的内存中，所以，我们在项目根目录中，根本找不到这个打包好的 bundle.js;
我们可以认为， webpack-dev-server 把打包好的文件，以一种虚拟的形式，托管到了咱们项目的根目录中，虽然我们看不到它，但是，可以认为，和 dist src node_modules 平级，有一个看不见的文件，叫做 bundle.js.

使用html-webpack-plugin插件配置启动页面

由于使用--contentBase指令的过程比较繁琐，需要指定启动的目录，同时还需要修改index.html中script标签的src属性，所以推荐大家使用html-webpack-plugin插件配置启动页面.

运行npm i html-webpack-plugin -D安装到开发依赖。

修改webpack.config.js配置文件如下：

 // 导入处理路径的模块
var path = require('path');
// 导入自动生成HTMl文件的插件
var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件
    output: { // 配置输出选项
        path: path.resolve(__dirname, 'dist'), // 配置输出的路径
        filename: 'bundle.js' // 配置输出的文件名
    },
    plugins:[ // 添加plugins节点配置插件
        new htmlWebpackPlugin({
            template:path.resolve(__dirname, 'src/index.html'),//模板路径
            filename:'index.html'//自动生成的HTML文件的名称
        })
    ]
}

修改package.json中script节点中的dev指令如下：
```
"dev": "webpack-dev-server"
```
将index.html中script标签注释掉，因为html-webpack-plugin插件会自动把bundle.js注入到index.html页面中。

实现自动打开浏览器、热更新和配置浏览器的默认端口号

方式一：
修改package.json的script节点如下，其中--open表示自动打开浏览器，--port 3000表示打开的端口号为3000，--hot表示启用浏览器热更新：

"dev": "webpack-dev-server --hot --port 3000 --open"

方式二：

修改webpack.config.js文件，新增devServer节点如下：
```
devServer:{
   hot:true,
   open:true,
   port:4321
}
```
在头部引入webpack模块
```
var webpack = require('webpack');
```

在plugins节点下新增： new webpack.HotModuleReplacementPlugin()

plugins: [ // 配置插件的节点
new webpack.HotModuleReplacementPlugin(), // new 一个热更新的 模块对象， 这是 启用热更新的第 3 步
new htmlWebpackPlugin({ // 创建一个 在内存中 生成 HTML  页面的插件
 template: path.join(__dirname, './src/index.html'), // 指定 模板页面，将来会根据指定的页面路径，去生成内存中的 页面
 filename: 'index.html' // 指定生成的页面的名称
})
 ]

webpack的的简单使用