Webpack
关注
分享
扫一扫
Webpack
Prosper Lee
谁又能来拯救我这灰暗的人生呢……
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Webpack（二十四）：总结
webpack 基本配置搭建准备$ npm init -y创建 package.json$ npm install webpack webpack-cli --save-dev安装基础依赖$ npm i webpack-dev-server --save-dev配置开发环境的运行创建 webpack.config.js 配置文件构建webpack运行的默认配置文件$ npm i html-webpack-plugin --save-dev生成一个HTML文件原创 2020-09-26 21:04:07 · 286 阅读 · 0 评论 -
Webpack（二十三）：性能优化总结
开发环境性能优化优化打包构建速度HMR优化代码调试功能source-map生产环境性能优化优化打包构建速度oneOf缓存（ 服务器 ）多进程打包externals 禁用一些包参与打包dll 处理第三方库打包优化代码运行性能缓存（ hash / chunkhash / contenthash ）去除无用代码 tree shaking代码分割js的 懒加载、预加载PWA...原创 2020-09-24 15:25:37 · 170 阅读 · 0 评论 -
Webpack（二十二）：性能优化-externals禁用一些包参与打包、dll处理第三方库打包
externals 禁用一些包参与打包（比如jQuery）<body> <button id="btn">CLICK</button> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script></body>// 入口文件import $ from 'jquery';console.log($);以上示例用c原创 2020-09-24 14:48:24 · 509 阅读 · 0 评论 -
Webpack（二十一）：性能优化-多进程打包
多进程打包npm i thread-loader -D使用一般为babel-loader使用module.exports = { module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: [ { loader: 'thread-loader', options: {原创 2020-09-24 09:03:56 · 274 阅读 · 0 评论 -
Webpack（二十）：性能优化-PWA技术 网站可离线访问
PWA渐进式网络开发应用程序（可离线访问网站）来吧，展示使用npm i workbox-webpack-plugin配置const WorkboxWebpackPlugin = require('workbox-webpack-plugin');module.exports = { plugins: [ /** * 1. 快速启动serviceworker * 2. 删除旧的serviceworker *原创 2020-09-23 21:50:08 · 183 阅读 · 0 评论 -
Webpack（十九）：性能优化-js 懒加载 和 预加载
js懒加载入口html index.html<!-- index.html --><button id="btn">CLICK</button>入口文件 index.js// index.jsconsole.log('index.js被加载~~~');document.getElementById('btn').onclick = () => { import( /* webpackChunkName: 'print' */ './p原创 2020-09-23 21:07:07 · 450 阅读 · 0 评论 -
Webpack（十八）：Cannot use [chunkhash] or [contenthash] for chunk in ‘js/[name].[contenthash:10].js‘ (us
运行dev报错npx webpack-dev-server解决方法module.exports = { output: { filename: this.mode === 'production' ? 'js/[name].[contenthash:10].js' : 'js/[name].[hash:10].js', },}原创 2020-09-23 17:53:26 · 3791 阅读 · 0 评论 -
Webpack（十七）：性能优化-代码分割
方案一：配置多入口进行代码分割，修改：module.exports = { entry: { main: './src/asset/js/index.js', print: './src/asset/js/print.js', }}多入口就不要在index.js中引入print.js了方案二：使用optimization配置，提取依赖进行打包将引入的node_modules重的代码单独打包，同时会将多入口时引入的公共的依赖，提取出来原创 2020-09-23 17:34:17 · 189 阅读 · 0 评论 -
Webpack（十六）：性能优化-去除无用代码 tree shaking
tree shaking 去除无用代码前提条件开启production模式使用ES6模块化可能出现问题打包后自动去除.css文件配置package.json"sideEffects": false 希望所有代码都在有用范围内（所有代码都没有副作用），js中引入的css文件并没有在js中使用，这时候就会过滤调css文件，打包不会生成css文件，相同的只有@babel/polyfill等"sideEffects": ["*.css"] 这样配置就会忽略css文件的处理.原创 2020-09-23 16:00:12 · 948 阅读 · 0 评论 -
Webpack（十五）：性能优化-缓存
web服务器开启了页面缓存以express搭建的服务器为例：// server.jsconst express = require('express');const app = new express();app.use(express.static('build', { maxAge: 1000 * 3600,}));app.listen(3000);console.log('http://localhost:3000/');node server.js将构建好的页面放到服原创 2020-09-23 15:34:48 · 217 阅读 · 0 评论 -
Webpack（十四）：性能优化-HMR、调试、oneOf
webpack性能优化开发环境性能优化优化webpack的打包构建性能HMR 开发环境优化优化代码调试功能代码调试优化生产环境性能优化优化webpack的打包构建性能优化生产环境打包构建速度 oneOf优化代码运行性能HMR 开发环境优化优化webpack的打包构建速度默认执行 npx webpack-dev-server 会打包所有模块再刷新页面进行展示处理，问题在于含有大量模块会影响打包构建速度优化方式：通过 HMR ( hot modu原创 2020-09-23 13:32:23 · 316 阅读 · 0 评论 -
Webpack（十三）：生产环境配置
来吧，展示目录结构webpack.config.jsconst { resolve,} = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const MiniCssExtractPlugin = require('mini-css-extract-plugin');const OptimizeCssAssetsPlugin = require('optimize-css-assets原创 2020-09-23 10:37:27 · 169 阅读 · 0 评论 -
Webpack（十二）：js兼容性处理
方案一：安装npm i babel-loader @babel/preset-env @babel/core -D配置module.exports = { module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', options: { /* 预设：指示babel做怎么样的兼容性的处理 */ presets: [ '原创 2020-09-23 09:25:26 · 222 阅读 · 0 评论 -
Webpack（十一）：语法检查
安装npm i eslint eslint-loader -D配置配置 webpack.config.jsmodule.exports = { module: { rules: [ // 代码语法检测 { test: /\.js$/, exclude: /node_modules/, loader: 'eslint-loader'原创 2020-09-22 16:08:43 · 274 阅读 · 0 评论 -
Webpack（十）：DevTools failed to load SourceMap: Could not load content for ··· ···
解决方法webpack.config.jsmodule.exports = { devtool: 'inline-source-map', // 加上对应的配置}原创 2020-09-22 15:31:18 · 5196 阅读 · 0 评论 -
Webpack（九）：css压缩
安装npm i optimize-css-assets-webpack-plugin使用const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');module.exports = { /* CODE */ plugins: [ new OptimizeCssAssetsPlugin() ]}原创 2020-09-22 15:25:35 · 190 阅读 · 0 评论 -
Webpack（八）：css兼容性处理、node环境 process.env.NODE_ENV
安装：npm i postcss postcss-loader postcss-preset-env -Dpostcss-preset-env作用：帮助 postcss 找到 package.json 中 browserslist 里面的配置,通过配置加载指定css兼容性样式// package.json 具体详见百度browserslist"browserslist": { // 开发环境 "development": [ "last 1 chrome原创 2020-09-22 15:05:32 · 559 阅读 · 0 评论 -
Webpack（七）：打包分离出来独立的 后缀名css 文件
安装npm i mini-css-extract-plugin --save-dev修改 webpack.config.jsconst MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { module: { rules: [ { test: /\.css$/, use: [原创 2020-09-22 15:00:09 · 449 阅读 · 0 评论 -
Webpack（六）：开发环境配置
安装npm i webpack-dev-server -D配置webpack.config.js /** * 开发服务器 自动编译，自动打开浏览器，自动刷新浏览器 * 特点：只会在内存中编译打包，不会有任何输出 * 启动：npx webpack-dev-server `npm i webpack-dev-server -D` */ devServer: { contentBase: resolve(__dirname, 'build'), // 运行路径原创 2020-09-22 11:42:31 · 144 阅读 · 0 评论 -
Webpack（五）：打包其他资源
打包其他资源安装npm i style-loader css-loader --save-dev 处理css文件npm i less less-loader --save-dev 处理less文件npm i html-webpack-plugin --save-dev 处理htmlnpm i url-loader file-loader --save-dev 处理图片和其他资源如：打包字体资源需要原样输出// resolve 用来拼接绝对路径的方法const { reso原创 2020-09-22 10:52:57 · 423 阅读 · 0 评论 -
Webpack（四）：打包图片资源
打包图片资源源码<!-- src/index.html --><body> <h1>Hello Lee</h1> <img src="./asset/images/01.png"> <div id="box01"></div> <div id="box02"></div> <div id="box03"></div></bo原创 2020-09-22 10:03:31 · 215 阅读 · 0 评论 -
Webpack（三）：打包html资源
打包html资源安装插件npm i html-webpack-plugin -D引入const HtmlWebpackPlugin = require('html-webpack-plugin');使用(修改 webpack.config.js)const HtmlWebpackPlugin = require('html-webpack-plugin');/* plugins配置 下载->引用->使用 */plugins: [ /* 默认创建一个空的ht原创 2020-09-22 10:02:16 · 251 阅读 · 0 评论 -
Webpack（二）：打包样式资源
打包样式资源安装npm i style-loader css-loader -D修改 webpack.config.js/* loader配置 */module: { rules: [ { // 匹配哪些文件 test: /\.css$/, /** * 使用那些loader进行处理 * 执行顺序由数组末尾向数组第一位执行原创 2020-09-22 10:01:00 · 142 阅读 · 0 评论 -
Webpack（一）：介绍、五个核心概念、基本配置
Webpack 介绍前端资源构建工具静态模块资源打包器1.index.js入口文件（引用了个各种资源jq、less等） 模块2.处理成代码块（chunk）3.将各个文件根据不同类别进行分类处理打包4.项目打包5.项目打包好生成的静态资源（bundle）Webpack 五个核心概念Entry入口指示Webpack从那个文件为入口起点进行打包处理Output输出指示Webpack打包后的资源bundles输出到哪里，以及如何命名LoaderWeboack只能原创 2020-09-21 22:29:12 · 457 阅读 · 2 评论