webpack工具的使用

webpack概述

我们写前端页面数经常会引入一些css，js等静态资源，然而当我们静态资源引用的比较多时，我们的网页加载速度会变得很慢，因为我们要发起很多的二次请求，并且要处理错综复杂的依赖关系。因此，我们学习 webpack ，解决各个包之间复杂的依赖关系

webpack：基于整个项目进行构建，可以很好的实现资源的合并，打包，压缩，混淆等功能

webpack 项目目录结构

dist： 发布完成后的产品级目录

node_modules：运行cnpm i jquery --save安装jquery类库后生成的文件

main.js： 项目的 js 入口文件

package.json：运行npm init初始化项目形成的文件

package-lock.json： node_modules 文件夹或者 package.json 文件发生变化时自动生成的

webpack.config.js：webpack 配置文件

使用 webpack 构建项目

1. 运行npm init初始化项目，使用npm管理项目中的依赖包
2. 创建项目基本的目录结构
3. 使用cnpm i jquery --save安装jquery类库
4. 创建main.js并书写各行变色的代码逻辑：

	// 导入jquery类库
    import $ from 'jquery'

    // 设置偶数行背景色，索引从0开始，0是偶数
    $('#list li:even').css('backgroundColor','lightblue');
    // 设置奇数行背景色
    $('#list li:odd').css('backgroundColor','pink');

5. 直接在页面上引用main.js会报错，因为浏览器不认识import这种高级的 JS 语法，需要使用 webpack 进行处理，webpack 默认会把这种高级的语法转换为低级的浏览器能识别的语法；
6. 运行webpack 入口文件路径 输出文件路径对main.js进行处理：

webpack src/js/main.js dist/bundle.js

使用 webstorm 运行以上命令时，必须现在 dist 文件夹下建立 bundle.js 文件，但是运行该命令后，生成的文件不在 bundle.js 中，而是在 dist 文件夹下另外生成一个 main.js 文件，在利用配置文件简化打包命令，直接用 webpack 打包时，则不会出现这个问题，直接生成 bundle.js 文件

使用 webpack 配置文件简化打包命令

1. 由于 webpack 打包路径太过复杂，需要指定入口文件和输出文件的路径，可以在 webpack 配置文件中进行路径配置，这样可以简化打包命令，直接用 webpack 即可

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

module.exports = {
	//配置 webpack 打包时需要指定的入口文件和输出文件的路径
     // 项目入口文件
    entry: path.resolve(__dirname, 'src/main.js'),
    
     // 配置输出选项
    output: {
        // 配置输出的路径
        path: path.resolve(__dirname, 'dist'), 
        // 配置输出的文件名
        filename: 'bundle.js' 
    }
}

实现 webpack 的实时打包构建

1. 由于每次重新修改代码之后，都需要手动运行 webpack 打包的命令，比较麻烦，所以使用webpack-dev-server来实现代码实时打包编译，当修改代码之后，会自动进行打包构建。
2. 运行 npm i webpack-dev-server --save-dev 安装到开发依赖
3. 安装完成之后，在命令行直接运行webpack-dev-server来进行打包，发现报错，此时需要借助于 package.json 文件中的指令，来进行运行webpack-dev-server 命令，在scripts节点下新增 "dev": "webpack-dev-server" 指令，发现可以进行实时打包，但是dist目录下并没有生成bundle.js文件，这是因为 webpack-dev-server 将打包好的文件放在了内存中
4. 修改index页面中 script 为 <script src="bundle.js"></script>

把 bundle.js 放在内存中的好处是：由于需要实时打包编译，所以放在内存中速度会非常快

这个时候访问 webpack-dev-server 启动的http://localhost:8080/网站，发现是一个文件夹的面板，需要点击到 src 目录下，才能打开我们的 index 首页

5. 为了能在访问http://localhost:8080/的时候直接访问到index首页，可以使用--contentBase src指令来修改 dev 指令，指定启动的根目录，--open 指令修改保存后默认打开浏览器，--port 3000 指定端口号，--hot 指令表示启用浏览器热更新

方式一：修改 package.json 中的 dev 属性

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

方式二：在 webpack 配置进行配置

1. 修改webpack.config.js文件，新增devServer节点如下：

devServer:{
        hot:true,
        open:true,
        port:4321
}

2. 在头部引入webpack模块：

var webpack = require('webpack');

3. 在plugins节点下新增：

new webpack.HotModuleReplacementPlugin()

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

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

1. 运行cnpm i html-webpack-plugin --save-dev安装到开发依赖
2. 修改webpack.config.js配置文件如下：

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

// 导入自动生成HTMl文件的插件
var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    plugins:[ // 添加plugins节点配置插件
        new htmlWebpackPlugin({
            //模板路径
            template:path.resolve(__dirname, 
            'src/index.html'),
            filename:'index.html'//自动生成的HTML文件的名称
        })
    ]
}

3. 将 index.html 中 script 标签注释掉，因为html-webpack-plugin插件会自动把 bundle.js 注入到 index.html 页面中

使用 webpack 打包 css 文件

webpack 默认只能打包 js 文件，因此打包 css 文件还需要我们做一些配置

1. 运行npm i style-loader css-loader --save-dev

   ​ npm i less-loader less -D

   ​ npm i sass-loader node-sass --save-dev

   ​ npm i url-loader file-loader --save-dev

2. 修改webpack.config.js这个配置文件：

3. 注意：use表示使用哪些模块来处理test所匹配到的文件；use中相关loader模块的调用顺序是从后向前调用的；

 // 用来配置第三方loader模块的
 module: {
     rules: [ // 文件的匹配规则
         //处理css文件的规则
         { test: /\.css$/, use: ['style-loader', 'css-
         loader'] },
         //处理 less 文件的规则
         { test: /\.less$/, use: ['style-loader', 'css-
         loader', 'less-loader'] },
         //处理 sass 文件的规则
         { test: /\.scss$/, use: ['style-loader', 'css-
         loader', 'sass-loader'] },
         // 处理 图片路径的 loader
         { test: /\.(jpg|png|gif|bmp|jpeg)$/, use:'url-
         loader?limit=7631&name=[hash:8]-[name].[ext]' }, 
          // 处理 字体文件的 loader 
         { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 
         'url-loader' },
 	 ]
 }

有关图片路径的配置说明：limit 给定的值，是图片的大小，单位是 byte， 如果我们引用的 图片，大于或等于给定的 limit值，则不会被转为base64格式的字符串， 如果 图片小于给定的 limit 值，则会被转为 base64的字符串

使用 babel 处理高级 JS 语法

1. 运行 npm i babel-core babel-loader babel-plugin-transform-runtime --save-dev 安装babel的相关loader包
2. 运行 npm i babel-preset-es2015 babel-preset-stage-0 --save-dev 安装babel转换的语法
3. 在 webpack.config.js 中添加相关loader模块，其中需要注意的是，一定要把node_modules文件夹添加到排除项：

{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }

4. 在项目根目录中添加.babelrc文件，并修改这个配置文件如下：

{
    "presets":["es2015", "stage-0"],
    "plugins":["transform-runtime"]
}

注意：语法插件babel-preset-es2015可以更新为babel-preset-env，它包含了所有的ES相关的语法；