前端工程化 Webpack基础

前端工程化

• 模块化 （js模块化，css模块化，其他资源模块化）
• 组件化 （复用现有的UI结构、样式、行为）
• 规范化 （目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理）
• 自动化 （自动化构建、自动部署、自动化测试）

webpack

• 前端项目工程化的具体解决方案
• 提供友好的前端模块化开发支持，以及代码压缩混淆、处理js兼容性、性能优化等强大功能

安装

• 初始化项目
  
  npm init -y
• 安装
  
  npm install webpack webpack-cli --save-dev
• 根目录创建webpack配置文件 webpack.config.js

// webpack.config.js
module.exports = {
    ...
}

webpack.config.js 配置

1.mode模式

• development
  • 开发环境
  • 不会对打包生成的文件进行代码压缩和性能优化
  • 打包速度快
• production
  • 生产环境
  • 会对打包生成的文件进行代码压缩和性能优化
  • 打包速度慢

module.exports = {
    mode: 'development'
}

2.出入口文件

• entry 打包文件入口，默认为：src/index.js
• output 打包文件输出，默认为： dist/main.js

const path = require('path')
module.exports = {
    entry: path.join(__dirname, './src/index.js'),   // 入口文件
    output: {
        path: path.join(__dirname, './dist'),        // 输出目录
        filename: 'bundle.js'                        // 输出文件
    }
}

3.loader加载器

webpack文件加载器，webpack默认只能打包处理.js文件，其他非.js后缀文件需要loader加载器处理完成后才能进行打包

3-1. less, css等样式文件处理

• 依赖安装 npm install style-loader css-loader less-loader --save-dev
• rules配置添加规则: test表示匹配文件类型，use表示要调用的loader，调用顺序为从后往前

module.exports = {
    rules: [
        { test: /\.css$/, use: ['style-loader', 'css-loader'] },    // css文件处理
        { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },    // less文件处理
    ]
}

3-2. url路径相关文件处理，如图片、字体文件、csv、xml文件等

• 依赖安装 npm install url-loader file-loader csv-loader xml-loader --save-dev
• url-loader参数：limit指定图片大小，单位为Byte，<=limit大小图片，才会被转为base64格式图片
• 参数配置为url参数与与options对象两种形式

module.exports = {
    rules: [
        // url参数形式配置
        { test: /\.jpg|png|gif$/, use: 'url-loader?limit=10000' },
        // url参数options形式配置
        {
            test: /\.jpg|png|gif$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    outputPath: 'image'       // 明确指定打包生成的图片文件存放到dist目录下的image文件夹中
                }
            }
        },
        // 字体文件
        {
            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
            use: {
                loader: 'url-loader',
                options: { limit: 10000 }
            }
        },
        // csv文件
        {
            test: /\.(csv|tsv)$/i,
            use: {
                loader: 'csv-loader'
            }
        },
        // xml文件
        {
            test: /\.xml$/i,
            use: {
                loader: 'xml-loader'
            }
        }
    ]
}

3-3. js高级语法处理

• 依赖安装 npm install ... --save-dev

名称	描述
@babel/core	babel核心工具
@babel/preset-env	babel预定义环境
babel-loader	babel加载器，编译js文件用
core-js	使老版本浏览器兼容新版ES语法

• babel配置比较灵活且复杂，可查看babel中文文档
• 配置举例

module.exports = {
    rules: [
        {
            test: /\.js$/,
            use: {
                loader: 'babel-loader',
                options: {
                    // 设置预定义环境
                    presets: [
                        [
                            '@babel/preset-env',    // 指定环境的插件
                            // 配置信息
                            {
                                // 兼容的浏览器目标版本
                                targets: {
                                    'chrome': '58',
                                    'ie': '11'
                                },
                                // 指定core.js版本
                                'corejs': '3',
                                // 使用corejs方式 'usage':按需加载
                                'useBuiltIns': 'usage'
                            }
                        ]
                    ]
                }
            }
        }
    ]
}

4.webpack-dev-server

• webpack 开发环境http服务器
• 安装 npm install webpack-dev-server --save-dev
• package.json配置scripts

"scripts": {
    "dev": "webpack serve"
}

• 启动 npm run dev
• webpack配置文件devServer节点

module.exports = {
    devServer: {
        open: true,             // npm run dev后，自动打开浏览器
        host: '127.0.0.1',      // 主机地址
        port: 8080              // 端口号，默认为8080
    }
}

5.插件

• html-webpack-plugin 自定义输出index.html内容，会将打包好的bundle.js自动注入index.html的底部
  • 安装 npm install html-webpack-plugin --save-dev
  • plugins节点引入

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'   // 指定入口自定义的html文件
        })
    ]
}

• clean-webpack-plugin 打包时自动清理dist目录旧文件插件
  • 安装 npm install clean-webpack-plugin --save-dev
  • 引入

const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
    plugins: [
        new CleanWebpackPlugin()
    ]
}

6.SourceMap

• 存储代码压缩混淆前后的对应关系文件
• 代码出错时，可以通过对应关系，直接显示原始代码出错位置，方便后期调试
• sourceMap选项很多，具体可参考webpack devtool sourcemap
• 常用选项为: source-map inline-source-map eval-source-map

module.exports = {
    // eval-source-map 使"运行报错的行数"与”源代码行数“保持一致，但性能较低
    devtool: 'eval-source-map'
}

• 实践建议
  • 开发环境建议设置为 eval-source-map，可以精准定位到具体的错误行
  • 生成环境建议关闭sourceMap，或者设置值为 nosources-source-map，防止源码泄露，提高安全性

打包发布

• package.json配置scripts

"scripts": {
    "build": "webpack --mode production"
}

• 打包 npm run build

摘要

更多配置可查看官方文档

• webpack中文文档
• babel中文文档