Sixology的博客

webpack详细配置 entry /* entry: 入口起点 1. string --> './src/index.js' 单入口 打包形成一个chunk。 输出一个bundle文件。 此时chunk的名称默认是 main 2. array --> ['./src/index.js', './src/add.js'] 多入口 所有入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件。

webpack性能优化 开发环境性能优化 生产环境性能优化 开发环境性能优化 优化打包构建速度 HMR 优化代码调试 source-map 生产环境性能优化 优化打包构建速度 oneOf babel缓存 多进程打包 externals dll 优化代码运行的性能 缓存(hash-chunkhash-contenthash) tree shaking code split 懒加载/预加载 pwa HMR HMR: hot module replacement 热模块替换 /

webpack生产环境配置 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')

Webpack开发环境配置 1.运行指令 开发环境：webpack ./src/index.js -o ./bulid/build.js --mode=development webpack 会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/build.js,整体打包环境是开发环境 生产环境：webpack ./src/index.js -o ./bulid/build.js --mode=production webpack 会以 ./src/

webpack自己动手写一个简单的插件plugin 首先配置webpack 和webpack-cli package.json内容如下 新建一个插件的文件

不多说直接上代码 webpack.config.js文件 const path=require('path');//获得当前目录的绝对路径 module.exports={ //输入的文件是webpack.config.js同一目录的src文件夹的index.js文件 //单一出口，输出的文件名是main.js entry:"./src/index.js", mode:"development", } const path=require('path');//获得当前目录的

【Loader】：用于对模块源码的转换，loader描述了webpack如何处理非javascript模块，并且在buld中引入这些依赖。loader可以将文件从不同的语言（如TypeScript）转换为JavaScript，或者将内联图像转换为data URL。比如说：CSS-Loader，Style-Loader等。 loader的使用很简单： 在webpack.config.js中指定loader。module.rules可以指定多个loader，对项目中的各个loader有个全局概览。 1.先在文件