webpack快速入门

最新推荐文章于 2024-02-15 10:28:36 发布
最新推荐文章于 2024-02-15 10:28:36 发布
阅读量437 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chendongpu/article/details/118571147
版权

生产环境作用:

能让代码优化上线运行的环境,要注意文件大小优化，兼容等方面

执行命令:

npx webpack

提取css成单独文件

安装包
# 指定版本,命令输入在一行
npm i -D webpack@5.36.2 webpack-cli@4.7.0 mini-css-extract-plugin@1.6.0 css-loader@5.2.4 html-webpack-plugin@5.3.1

#逐个依次安装
npm i -D webpack@5.36.2 
npm i -D webpack-cli@4.7.0  
npm i -D css-loader@5.2.4 
npm i -D html-webpack-plugin@5.3.1
#新增
npm i -D mini-css-extract-plugin@1.6.0
配置
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
//导入包
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/bundle.js',
    path: resolve(__dirname, 'dist')
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          // 这个loader取代style-loader。作用：提取js中的css成单独文件
          MiniCssExtractPlugin.loader,
          // 将css文件整合到js文件中
          'css-loader'
        ]
      }                    
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
      // 对输出的css文件进行重命名
      filename: 'css/bundle.css'
    })
  ]
};

css兼容性处理

安装包
# 新增
npm i -D postcss-loader@5.2.0 postcss-preset-env@6.7.0

#逐个依次安装
npm i -D postcss-loader@5.2.0
npm i -D postcss-preset-env@6.7.0

配置

//webpack.config.js中
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 设置nodejs环境变量,默认是production
process.env.NODE_ENV = 'development';
module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/bundle.js',
    path: resolve(__dirname, 'dist')
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          // 修改loader的配置
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [require('postcss-preset-env')()]
              }
            }
          }            
        ]
      }      
    ]
  }, plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'css/build.css'
    })
  ]
};

// 在package.json中添加browserslist键值实现配置，通过配置加载指定的css兼容性样式
 "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }
说明

如果出现错误，到https://www.npmjs.com/上查看用法更新

压缩css

安装包
# 新增
npm i -D optimize-css-assets-webpack-plugin@5.0.4

说明：

The optimize-css-assets-webpack-plugin@4.0.0 version and above supports webpack v4.

根据上面信息，对webpack v4支持，没提到对webpack v5支持。

//会出现下面信息，经测试不影响压缩
(node:12932) [DEP_WEBPACK_COMPILATION_OPTIMIZE_CHUNK_ASSETS] DeprecationWarning: optimizeChunkAssets is deprecated (use Compilation.hooks.processAssets instead and use one of Compilation.PROCESS_ASSETS_STAGE_* as stage option)
(Use `node --trace-deprecation ...` to show where the warning was created)

关注网址：https://www.npmjs.com/package/optimize-css-assets-webpack-plugin 看支持最新信息

配置
//接css兼容性处理的配置，进行添加
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//导入包
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/bundle.js',
    path: resolve(__dirname, 'dist')
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [require('postcss-preset-env')()]
              }
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'css/build.css'
    }),
     // 压缩css
    new OptimizeCssAssetsWebpackPlugin()
  ]
};

js语法检查

旧版

安装包

npm i -D webpack@5.36.2 webpack-cli@4.7.0 html-webpack-plugin@5.3.1
npm i eslint-config-airbnb-base eslint-plugin-import eslint eslint-loader -D

配置

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          // 自动修复eslint的错误
          fix: true
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
};


// 在package.json中添加eslintConfig中设置
"eslintConfig": {
  "extends": "airbnb-base"
}

说明

  • 在js中下一行不进行eslint检查,在js中添加 // eslint-disable-next-line 则 console.log("aaa");这一行不检查。

    //在./src/js/index.js中
// eslint-disable-next-line
console.log("aaa");

使用eslint-webpack-plugin替换旧版eslint-loader

安装包:
# 指定版本,命令输入在一行
npm i -D webpack@5.36.2 webpack-cli@4.7.0 html-webpack-plugin@5.3.1 eslint@7.26.0 eslint-config-airbnb-base@14.2.1 eslint-plugin-import@2.22.1 eslint-webpack-plugin@2.5.4

# 逐个依次安装
npm i -D webpack@5.36.2
npm i -D webpack-cli@4.7.0
npm i -D html-webpack-plugin@5.3.1
# 新增
npm i -D eslint@7.26.0
npm i -D eslint-config-airbnb-base@14.2.1
npm i -D eslint-plugin-import@2.22.1
npm i -D eslint-webpack-plugin@2.5.4

配置
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/bundle.js',
    path: resolve(__dirname, 'dist')
  },
  module: {
    rules: [
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new ESLintPlugin({
      fix: true,
      extensions: ['js', 'json', 'coffee'],
      exclude: '/node_modules/'
    })
  ],
  mode: 'development'
};

// 在package.json中添加eslintConfig中设置
"eslintConfig": {
  "extends": "airbnb-base"
}
说明:

在js中哪一行不进行eslint检查, 在在上面想添加 // eslint-disable-next-line

js兼容性处理

安装包
# 指定版本,命令输入在一行
npm i -D babel-loader@8.2.2 @babel/core@7.14.0 @babel/preset-env@7.14.1 core-js@3.12.1

# 逐个依次安装
#新增
npm i -D babel-loader@8.2.2
npm i -D @babel/core@7.14.0
npm i -D @babel/preset-env@7.14.1
npm i -D core-js@3.12.1

配置
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/bundle.js',
    path: resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          // 预设：指示babel做怎么样的兼容性处理
          presets: [
            [
              '@babel/preset-env',
              {
                // 按需加载
                useBuiltIns: 'usage',
                // 指定core-js版本
                corejs: {
                  version: 3
                },
                // 指定兼容性做到哪个版本浏览器
                targets: {
                  chrome: '60',
                  firefox: '60',
                  ie: '9',
                  safari: '10',
                  edge: '17'
                }
              }
            ]
          ]
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
};


// 在package.json中添加browserslist键值实现配置，通过配置加载指定的js兼容性样式,同css兼容性处理可以一样
 "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }

js压缩

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/bundle.js',
    path: resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  // 生产环境下会自动压缩js代码
  mode: 'production'
};

html压缩

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/bundle.js',
    path: resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      // 压缩html代码
      minify: {
        // 移除空格
        collapseWhitespace: true,
        // 移除注释
        removeComments: true
      }
    })
  ],
  mode: 'production'
};

二、生产环境配置（综合配置）

初始化

# 初始化项目
npm init -y

# 指定版本,命令输入在一行
npm i -D webpack@5.36.2 webpack-cli@4.7.0 style-loader@2.0.0 css-loader@5.2.4 less@4.1.1 less-loader@8.1.1 html-webpack-plugin@5.3.1 html-loader@2.1.2 file-loader@6.2.0 url-loader@4.1.1 mini-css-extract-plugin@1.6.0 postcss-loader@5.2.0 postcss-preset-env@6.7.0 optimize-css-assets-webpack-plugin@5.0.4 eslint@7.26.0  eslint-config-airbnb-base@14.2.1  eslint-plugin-import@2.22.1  eslint-webpack-plugin@2.5.4 babel-loader@8.2.2  @babel/core@7.14.0  @babel/preset-env@7.14.1  core-js@3.12.1

#逐个依次安装
npm i -D webpack@5.36.2 
npm i -D webpack-cli@4.7.0 
npm i -D style-loader@2.0.0 
npm i -D css-loader@5.2.4
npm i -D less@4.1.1
npm i -D less-loader@8.1.1
npm i -D html-webpack-plugin@5.3.1
npm i -D html-loader@2.1.2
npm i -D file-loader@6.2.0
npm i -D url-loader@4.1.1
npm i -D mini-css-extract-plugin@1.6.0
npm i -D postcss-loader@5.2.0
npm i -D postcss-preset-env@6.7.0
npm i -D optimize-css-assets-webpack-plugin@5.0.4
npm i -D eslint@7.26.0 
npm i -D eslint-config-airbnb-base@14.2.1 
npm i -D eslint-plugin-import@2.22.1 
npm i -D eslint-webpack-plugin@2.5.4
npm i -D babel-loader@8.2.2 
npm i -D @babel/core@7.14.0 
npm i -D @babel/preset-env@7.14.1 
npm i -D core-js@3.12.1

配置

//webpack.config.js中
const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
// 定义nodejs环境变量：决定使用browserslist的哪个环境
process.env.NODE_ENV = 'production';
// 复用loader
const commonCssLoader = [
  MiniCssExtractPlugin.loader,
  'css-loader',
  {
    loader: 'postcss-loader',
    options: { postcssOptions: { plugins: [require('postcss-preset-env')()] } }
  }
];
module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/bundle.js',
    path: resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [...commonCssLoader]
      },
      {
        test: /\.less$/,
        use: [...commonCssLoader, 'less-loader']
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: [
            [
              '@babel/preset-env',
              {
                useBuiltIns: 'usage',
                corejs: { version: 3 },
                targets: { chrome: '60', firefox: '50', ie: '9', safari: '10', edge: '17' }
              }
            ]
          ]
        }
      },
      {
        test: /\.(jpg|png|gif)/,
        loader: 'url-loader',
        options: { limit: 8 * 1024, name: '[hash:10].[ext]', outputPath: 'imgs', esModule: false }
      },
      {
        test: /\.html$/,
        loader: 'html-loader',
        options: {
          esModule: false,
        }
      },
      {
        exclude: /\.(js|css|less|html|jpg|png|gif)/,
        loader: 'file-loader',
        options: { outputPath: 'media' }
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/bundle.css'
    }),
    new OptimizeCssAssetsWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        collapseWhitespace: true,
        removeComments: true
      }
    }),
 	new ESLintPlugin({
      fix: true,
      extensions: ['js', 'json', 'coffee'],
      exclude: '/node_modules/'
    })
  ],
  mode: 'production'
};


// 在package.json中添加browserslist和eslintConfig配置
 "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  },
"eslintConfig": {
  "extends": "airbnb-base"
}

说明

  • 入口路径: './src/js/index.js'

  • js输出路径: './dist/js/bundle.js'

  • 输出目录: path: resolve(__dirname, 'dist')

  • index.html模板入口路径： './src/index.html'

  • index.html模板输出路径：'./dist/index.html'

  • 处理图片资源配置中出现的outputPath: 'imgs'为设置图片输出目录，在'./dist/imgs/'目录里

  • 处理其他资源配置中出现的outputPath: 'media'为设置其他资源输出目录，在'./dist/media/'目录里

  • 目录划分

    • ./scr/js 存放js文件
    • ./src/imgs 存放图片
    • ./src/css 存放css
    • ./src/media 存放其他资源，比如字体

  • 执行命令：npx webpack

旧版

初始化

最新版本安装（可能出现兼容性问题）

npm init -y

//package.json中devDependencies里添加下面部分
	"@babel/core": "^7.14.0",
    "@babel/preset-env": "^7.14.1",
    "babel-loader": "^8.2.2",
    "core-js": "^3.12.0",
    "css-loader": "^5.2.4",
    "eslint": "^7.26.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-import": "^2.22.1",
    "file-loader": "^6.2.0",
    "html-loader": "^2.1.2",
    "html-webpack-plugin": "^5.3.1",
    "less": "^4.1.1",
    "less-loader": "^8.1.1",
    "mini-css-extract-plugin": "^1.6.0",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
    "postcss-loader": "^5.2.0",
    "postcss-preset-env": "^6.7.0",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.36.2",
    "webpack-cli": "^4.7.0"

npm install .

配置

//webpack.config.js中
const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 定义nodejs环境变量：决定使用browserslist的哪个环境
process.env.NODE_ENV = 'production';
// 复用loader
const commonCssLoader = [
  MiniCssExtractPlugin.loader,
  'css-loader',
  {
    loader: 'postcss-loader',
    options: { postcssOptions: { plugins: [require('postcss-preset-env')()] } }
  }
];
module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/bundle.js',
    path: resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [...commonCssLoader]
      },
      {
        test: /\.less$/,
        use: [...commonCssLoader, 'less-loader']
      },
      //当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序： 
      {
        // 在package.json中eslintConfig --> airbnb
        test: /\.js$/,
        exclude: /node_modules/,
        enforce: 'pre',		// 优先执行设置
        loader: 'eslint-loader',
        options: {
          fix: true
        }
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: [
            [
              '@babel/preset-env',
              {
                useBuiltIns: 'usage',
                corejs: { version: 3 },
                targets: { chrome: '60', firefox: '50', ie: '9', safari: '10', edge: '17' }
              }
            ]
          ]
        }
      },
      {
        test: /\.(jpg|png|gif)/,
        loader: 'url-loader',
        options: { limit: 8 * 1024, name: '[hash:10].[ext]', outputPath: 'imgs', esModule: false }
      },
      {
        test: /\.html$/,
        loader: 'html-loader',
        options: {
          esModule: false,
        }
      },
      {
        exclude: /\.(js|css|less|html|jpg|png|gif)/,
        loader: 'file-loader',
        options: { outputPath: 'media' }
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/bundle.css'
    }),
    new OptimizeCssAssetsWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        collapseWhitespace: true,
        removeComments: true
      }
    })
  ],
  mode: 'production'
};


// 在package.json中添加browserslist和eslintConfig配置
 "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  },
"eslintConfig": {
  "extends": "airbnb-base"
}
reg183
关注
专栏目录
webpack系列 —— 打包原理
七月
04-27 1万+
为什么要使用webpack? 如今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法: 模块化，让我们可以把复杂的程序细化为小的文件; 类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能装换为JavaScript文件使浏览器可以识别； scss，less等CSS预处理器 ......... 这
Webpack 快速入门指南（一）
彳亍
08-27 521
简介 webpack 是一个前端资源加载/打包工具。 webpack 是一个 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 webpack 可以将多种静态资源（js、css、...
webpack打包原理阮一峰(webpack打包原理优化)
计算机毕业论文源码，学生个人网页制作html源码。贴近用户做网络推广和互联网优化。
12-30 1029
阮俊峰这个多少分，这个名字好吗? 含义风云蔽月象才智谋略虽业博名利实力其刚频意外灾患内外败涂困难苦惨绝若主运数乏其吉数助陷病弱、废疾、孤寡甚至夭折妻死别、刑罚、杀伤等灾万事挫折非命至极故叫短命数若先金水者 孤峰原理是怎样的？孤峰原理指的是什么？ 在市场上，消费者所感受到的是由“孤峰”营造的企 业特色，即使其...
npm run serve 警告
weixin_42147551的博客
04-18 1388
一直以为是webpack5，实际上还停留在webpack4，升级后无警告。npm run serve 警告。
Error: error:0308010C:digital envelope routines::unsupported
最新发布
不积跬步，无以至千里；不积小流，无以成江海。
02-15 1138
# 报错 (node:16863) [DEP_WEBPACK_CONFIGURATION_OPTIMIZATION_NO_EMIT_ON_ERRORS] DeprecationWarning: optimization.noEmitOnErrors is deprecated in favor of optimization.emitOnErrors (Use `node --trace-deprecation ...` to show where the warning was created) (nod
前端工程化之Webpack优化
weixin_52884694的博客
09-13 2747
❝ 打不垮我的，将使我更加坚强 --尼采 ❞ 大家好，我是「柒八九」。 好久没更文了，其实这段时间，一直没闲着。在准备一些比较重要的东西。忙着跑步，忙着学习，忙着xx。 总之就是，一直在忙着，从未停歇。 虽然，这段时间，没有文章的发布，其实，在私底下，已经有不下10篇的文章已经起手了。等再润色一下，就会和大家见面。 学习总结 这是，我之前学习总结，后期会逐步给大家免费分享。敬请期待。 好了，闲话少叙。 今天，我们来谈谈关于-- Webpack的打包优化。 你能所学到的知识点 ❝ Webpack Loa
[DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future
01-14 3021
DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated. 这是 html-webpack-plugin 引起的 解决办法： npm uninstall html-webpack-plugin npm install -D html-webpack-plugin@next
webpack-quick-start:Webpack快速入门
05-02
现在，让我们一起深入学习 Webpack 的快速入门知识。 一、安装与配置 首先，你需要全局安装 `webpack` 和 `webpack-cli`，它们分别是 Webpack 的核心库和命令行接口。在命令行中运行以下命令： ```bash npm ...
uikit-webpack-starter:uikit Webpack快速入门应用程序
04-30
UIKIT Webpack快速入门 使用webpack和UIKIT的快速入门应用程序。 git clone https://github.com/CliffCrerar/uikit-webpack-starter.git npm install npm start
webpack 快速入门教程
木木木森林
05-23 1127
目录1、了解 Webpack 相关什么是 webpack五大“护法”理解 Loader理解 Plugins配置文件(默认)2、准备工作3、小试牛刀4、使用 webpack 配置文件5、js 语法检查6、js 语法转换7、打包 less 资源8、打包样式文件中的图片资源9、打包其他资源10、打包 html 文件11、自动编译打包运行12、准备生产环境13、提取 css 成单独文件14、添加 css 兼容15、压缩 css16、压缩 html17、高频面试题 1、了解 Webpack 相关 什么是 webpac
webpack插件开发及修改源码的几种方式
confidence68的专栏
09-21 971
前言 webpack是我们平时工作中必不可少的工具，难免有时候需要对webpack编译的代码进行个性化处理操作，那么需要通过webpack插件或者修改其代码的方式来完成，本篇文章着重介绍webpack插件开发及修改源码的一些方式。很久之前我也写过webpack相关文章，例如：webpack前端技术小结，更多webpack知识，欢迎关注haorooms前端博客。 插件使用 我们工作中，肯定用过webpack插件，用法如下： // webpack.config.js var HelloWorldPlu
前端工程化精讲第十三课 缓存优化：那些基于缓存的优化方案
fegus的博客
08-28 599
今天我们聊了 Webpack 常规构建效率优化的第三个方面：缓存优化主题的内容。Webpack 的构建缓存优化分为两个阶段：编译阶段的针对 Loader 的缓存优化，以及优化打包阶段的针对压缩代码过程的缓存优化。除了了解这些优化的工具和设置外，在使用缓存时还需要额外注意如何减少缓存的失效。此外，针对不同的构建环境，还需要考虑到缓存目录的留存与清理等问题。这节课的课后思考题是：课程中介绍的几种支持缓存的工具在设定上有哪些相似的功能选项？建议你在课后对它们做一个整理对比，以便加深印象。...
webpack原理探究 && 打包优化
顺其自然~专栏
05-30 1656
　　在做vue项目和react项目时，都用到了webpack。webpack帮助我们很好地提高了工作效率，但是一直以来没有对其原理进行探究，略有遗憾。 因为使用一个工具，能够深入了解其原理才能更好地使用。 这篇文章将大致分为三个部分进行解读： webpack打包简单介绍 输入webpack后发生了什么，整个运行机制大致是怎样的？ 如何理解打包出的bundle.js？ 如何实现一个简单的webpack打包工具？ 打包优化 第一部分： webpack打包简单介绍 　 当一个项目使...
webpack4升级一路填坑记(vue-cli新建的工程)
weixin_34034261的博客
12-19 948
2019独角兽企业重金招聘Python工程师标准>>> ...
npm，webpack学习中遇到的各种问题
热门推荐
高山上的鱼
11-19 8万+
问题1：端口被占用  npm start > @ start /Users/qingtian/Desktop/dva/examples/user-dashboard > dora --plugins "proxy,webpack,webpack-hmr"           proxy: load rule from proxy.config.js (node:853
Webpack（优化和问题）
雪急飞绪博客
06-29 539
Webpack 简介 webpack 是什么 webpack 是一种前端资源构建工具，一个静态模块打包器（module bundler） 在 webpack 看来，前端的所有资源文件（js/json/css/img/less…）都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源（bundle）。 webpack 五个核心概念 Entry 入口，指示 webpack 以哪个文件作为入口起点开始打包，分析构建内部依赖图 Output 输出，指示 webpack 打包后的资源 b
Webpack快速入门与核心概念详解
本文档旨在为初学者介绍Webpack的基础知识，包括其安装步骤、核心概念和快速入门示例。 ### 安装与环境准备 - **Node.js版本要求**：确保你的Node.js版本至少为10以上，因为Webpack依赖于Node.js运行时环境。可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

reg183

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值