ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

前端工程化 Webpack基础

2022-03-29 16:31:09  阅读:51  来源: 互联网

标签:npm 文件 前端 webpack dev js Webpack 工程化 loader


前端工程化

  • 模块化 (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语法
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

摘要

更多配置可查看官方文档

标签:npm,文件,前端,webpack,dev,js,Webpack,工程化,loader
来源: https://www.cnblogs.com/fanguangfe/p/16072541.html

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有