webpack基础配置与优化配置

最新推荐文章于 2024-05-16 18:30:12 发布

poyoho

最新推荐文章于 2024-05-16 18:30:12 发布

阅读量245

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_40653901/article/details/108280653

版权

本文介绍了webpack的基础配置，包括cli和打包流程，并深入探讨了生产环境下的优化策略，如HMR、source map、code splitting、tree shaking等，旨在提升打包速度和运行性能。同时，文章还讲解了PWA、thread-loader、externals和dll动态链接库的使用，以实现更高效的应用构建。

摘要由CSDN通过智能技术生成

webpack

type	commont
entry	入口
output	出口
loader	翻译器(简单功能)
plugins	插件(更复杂的功能)
mode	运行模式
mode	development	开发模式
mode	production	生成模式

cli

webpack 打包

webpack ./src/index.js -o ./build/built.js --mode=development
webpack ./src/index.js -o ./build/built2.js --mode=production

webpack 打包

const {
    resolve } = require('path');
// 依赖webpack npm i html-webpack-plugin webpack
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
   
    // 入口
    entry: resolve(__dirname, 'src/index.js'),
    // 出口
    output: {
   
        path: resolve(__dirname, 'build'),
        filename: 'js/built.js'
    },
    // 插件
    plugins: [
        // 创建默认html文件， 导入打包输出资源
        new HtmlWebpackPlugin({
   
            // 使用该文件作为模板，再导入输出资源
            template: resolve(__dirname, 'src/index.html'),
        })
    ],
    module: {
   
        // loader配置
        rules: [
            {
    test: /\.css$/, use: ['style-loader', 'css-loader'] },
            // npm i less-loader less 
            {
    test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            // npm i url-loader file-loader
            {
   
                test: /\.(jpg|jpeg|png|gif|bmp)$/,
                // 使用es6解析 html-loader使用commonjs
                loader: 'url-loader',
                options: {
   
                    // 小于8kb使用base64
                    // 减少请求数量
                    // 体积更大
                    limit: 50 * 1024,
                    // 使用commonjs规则
                    esModule: false,
                    // '[hash:10].[ext]' 名字 hash10位
                    name: '[hash:10].[ext]',
                    // 输出目录
                    outputPath: 'imgs/',
                }
            },
            // npm i html-loader
            // html使用url-loader打包的图片
            {
    test: /\.html$/, loader: 'html-loader', },
            // npm i file-loader
            // 打包图标资源
            {
    test: /\.(eot|svg|ttf|woff)$/, loader: 'file-loader', options: {
    name: '[hash:10].[ext]', outputPath: 'icon/', } },
        ]
    },
    // 模式
    mode: 'development',
    // devServer
    // 监听src的变化
    // 内存编译打包 不会有编译输出
    devServer: {
   
        contentBase: resolve(__dirname, 'build'),
        compress: true,
        port: 3000,
        // 打开浏览器
        open: true,
    }
}

生产环境

css与js分离
1. js体制过大，下载慢
2. js堵塞运行，先加载js再加载css会闪屏
代码压缩
兼容性问题

package.json

添加css兼容性处理

"browserslist": {
   
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",          // > 99.8的浏览器
      "not dead",       // 不要死了的浏览器
      "not op_mini all" // 不要op_mini浏览器
    ]
  }