系列文章目录

通过wabpack.config.js实现打包

1. 刚开始要基本,开发模块,实现入口,出口打包

2. 后来实现html,抽离css文件输出打包输出

3. 正常实现es6转换es5
基本实现效果查看webpack官网达到实现效果

一、通过实现减少查找路径来实现优化？

//某个路径 配置别名 优化resolve: {alias: {"@": "",},

二、通过多线程工作来优化

首先需要引入一包 happypack,在plugins中配置

const HappyPack = require("happypack");
//os是自带的
const os = require("os");
//获取自己电脑的cpu
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });plugins: [new HappyPack({//用id来标识 happypack处理那里类文件id: "happyBabel",//如何处理  用法和loader 的配置一样loaders: [{loader: "babel-loader",//options es6转换为es5 必须写这里options: {presets: ["@babel/preset-env"],},},],//cache已配置属性cache: true,//共享进程池threadPool: happyThreadPool,//允许 HappyPack 输出日志verbose: true,}),
]

三、通过平常咱写的代码中有引入未使用的情况下实现未使用的话就不打包来实现优化(dll`Plugin`)

//第三方动态链接库(专门去做第三方包抽离) 弄成cdn链接 dllplugins
const webpack = require("webpack");
plugins: [new webpack.DllReferencePlugin({context: __dirname,//判断后知晓那些文件不需要打包manifest: require("./dll/vendor.manifest.json"),}),
]

重点!!!! webpack版本匹配 webpack中package.json中版本

总体代码:

//path 拼接路径
const path = require("path");
//清除 每次只显示一个
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
//html 显示
const HtmlWebpackPlugin = require("html-webpack-plugin");
//build出css
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//抛出 node js规范
//eval 传入一个字符串 书写js逻辑 游览器需要解析的文件
//hash 20几位 :8 后面显示8位 每次没有发生改变 不会改变 解析内容改变 hash值跟着改变
//html HtmlWebpackPlugin处理
//polyfill 处理promise js//多线程
const HappyPack = require("happypack");
//os是自带的
const os = require("os");
//获取自己电脑的cpu
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });//第三方动态链接库(专门去做第三方包抽离) 弄成cdn链接 dllplugins
const webpack = require("webpack");module.exports = {//开发模式mode: "development", //production //生产环境//入口 垫片 js转换entry: ["@babel/polyfill", path.resolve(__dirname, "./src/main.js")],//出口output: {//出口路径path: path.resolve(__dirname, "./build"),//出口文件名filename: "[name].[hash:3].js",},//每个模块module: {rules: [//SASS MiniCssExtractPlugin并处理css{test: /.scss$/,//先写style-loader 从后往前解析use: [// 将 JS 字符串生成为 style 节点MiniCssExtractPlugin.loader,// 将 CSS 转化成 CommonJS 模块"css-loader",//兼容 只能在css后{loader: "postcss-loader",},// 将 Sass 编译成 CSS"sass-loader",],},//解析js 把es6转换为es5{test: /.js$/,//把对.js 的文件处理交给id为happyBabel 的HappyPack 的实例执行loader: "happypack/loader?id=happyBabel",//排除node_modules 目录下的文件exclude: /node_modules/,},],},plugins: [//清楚多余文件 只显示一个文件new CleanWebpackPlugin({path: "./build",}),//htmlnew HtmlWebpackPlugin({//模板 生成已谁为模板的htmltemplate: path.resolve(__dirname, "./public/index.html"),}),//cssnew MiniCssExtractPlugin({filename: "[name].css", //输出的css文件名，默认以入口文件名命名(例如main.css)}),//多线程工作new HappyPack({//用id来标识 happypack处理那里类文件id: "happyBabel",//如何处理  用法和loader 的配置一样loaders: [{loader: "babel-loader",//options es6转换为es5 必须写这里options: {presets: ["@babel/preset-env"],},},],//cache已配置属性cache: true,//共享进程池threadPool: happyThreadPool,//允许 HappyPack 输出日志verbose: true,}),new webpack.DllReferencePlugin({context: __dirname,//判断后知晓那些文件不需要打包manifest: require("./dll/vendor.manifest.json"),}),],//某个路径 配置别名 优化resolve: {alias: {"@": "",},},
};

webpack打包优化(polyfill/HappyPack/dllPlugin)相关推荐

webpack打包vue反编译_2020年你必须知道的webpack打包优化方法
本文字数:3534字预计阅读时间:10分钟随着我们的项目项目越做越大,引入的第三方库会越来越多,打包的依赖也越来越多,每次 build 的时间越来越长,打包出来的文件会越来越大.最糟糕的是单页面应 ...
webpack打包优化
webpack打包优化开发环境优化 1.开启热模块替换(HMR) **原因:**如果不开启 HMR功能的话,修改某一个模块的时候,所有模块都会重新打包实现: 给devServer添加 hot:t ...
webpack打包优化配置
文章目录前言不进行任何打包配置代码分离 splitChunk runtimeChunk 动态导入 css文件处理 css文件提取 css文件压缩 css实现Tree Shaking js实现Tr ...
混合开发与移动端--H5混合开发、H5页面的开发布局、开发注意事项、H5与原生（安卓）交互、webpack打包优化解决方案、H5调试工具、webview
H5混合开发混合开发.原生开发.H5开发的区别: 简述:主流APP:原生APP.H5(webapp).混合APP,相对应的定制研发即原生开发.H5开发.混合开发原生APP开发优缺点: 可以访问手机 ...
Webpack打包优化-外部扩展externals的实际应用
Webpack打包优化-外部扩展externals的实际应用拆分文件我们在使用js库如vue或者react等的时候,webpack会将他们一起打包,react和react-dom文件就好几百k,全 ...
看看webpack打包优化
webpack 打包策略,主要有下列几种方法. 1.CDN2.DllPlugin3.splitChunks4.happypack 下面详细介绍使用的流程. CDN 通常使用的第三方模块很大时,但是又想 ...
webpack打包优化_Webpack 构建速度优化
如何输出Webpack构建分析输出Webpack构建信息的 .json文件: webpack --profile --json > starts.json 说明: --profile:记录构建 ...
html 打包优化,Webpack打包优化
一.前言对于使用vue开发项目的FE来说,打包上线这个环节相信大家都不陌生.本文主要是介绍如何通过webpack(实践版本:webpack4.16.5)的配置来提高打包构建速度以及减小包的体积. 二 ...
webpack打包优化_前端性能优化：webpack性能调优与Gzip原理
链接:https://juejin.im/book/5b936540f265da0a9624b04b 从输入 URL 到显示页面这个过程中,涉及到网络层面的,有三个主要过程: DNS 解析 TCP 连 ...

webpack打包优化(polyfill/HappyPack/dllPlugin)

系列文章目录

通过wabpack.config.js实现打包

一、通过实现减少查找路径来实现优化？

二、通过多线程工作来优化

三、通过平常咱写的代码中有引入未使用的情况下实现未使用的话就不打包来实现优化(dll`Plugin`)

重点!!!! webpack版本匹配 webpack中package.json中版本

总体代码:

webpack打包优化(polyfill/HappyPack/dllPlugin)相关推荐

最新文章

热门文章

webpack打包优化(polyfill/HappyPack/dllPlugin)

系列文章目录

通过wabpack.config.js实现打包

一、通过实现减少查找路径来实现优化？

二、通过多线程工作来优化

三、通过平常咱写的代码中有引入未使用的情况下实现未使用的话就不打包来实现优化(dllPlugin)

重点!!!! webpack版本匹配 webpack中package.json中版本

总体代码:

webpack打包优化(polyfill/HappyPack/dllPlugin)相关推荐

最新文章

热门文章

三、通过平常咱写的代码中有引入未使用的情况下实现未使用的话就不打包来实现优化(dll`Plugin`)