webpack
rainbow8590
这个作者很懒,什么都没留下…
展开
-
webpack基础 -- PostCSS
postcss: 在打包时期作用.安装: postcss / postcss-loader / postcss-cssnano / postcss-cssnext / autoprefixer npm install postcss postcss-loader cssnano postcss-cssnext autoprefixer –save-dev autopr...原创 2018-07-17 14:12:45 · 558 阅读 · 0 评论 -
webpack基础 -- 生成html
插件: html-webpack-plugin options: template:模板文件 filename: 输出文件名 minify: 是否压缩html文件 chunks: 生成的html文件中需要加载哪些chunk inject: 是否以将css/js以标签的...原创 2018-07-31 11:34:31 · 247 阅读 · 0 评论 -
webpack基础 -- 处理html中引入的图片
使用: html-loader options: { attrs:[img:src] } <\img src=”src/assets/img/demo.png” data-src=”src/assets/img/demo1.png” />’ webpack 配置rules:[ { test:/\.(png|jpg|jpeg|gif)$/,...原创 2018-07-31 11:51:30 · 3623 阅读 · 1 评论 -
webpack 配合优化
提前载入 webpack 加载代码插件: html-webpack-inline-chunk-plugin: 将选择的chunk插入到html中 inline-manifest-webpack-plugin 将webpack生成的代码插入到html中webpack配置rules:[ { test:/\.js$/, use:[ ...原创 2018-07-31 12:02:55 · 532 阅读 · 0 评论 -
webpack环境 -- webpack -watch
运行 webpack -watch 可自动搭建一个服务器环境. webpack -w –progress 查看打包进度 插件 : clean-webpack-plugin 每次打包清除插件var ClearWebpackPlugin = require('clean-webpack-plugin')plugins:[ new ClearWebpackPlugin (['di...原创 2018-07-31 13:26:43 · 1069 阅读 · 0 评论 -
webpack环境 -- webpack-dev-server 模块热更新
配置devServer: devServer:{ hot: true }配置插件: plugins:[ new webpack.HotModuleReplacementPlugin(), new webpack.NameModulesPlugin() ]原创 2018-07-31 14:40:25 · 626 阅读 · 0 评论 -
webpack环境 -- 开启调试 sourceMap
Source Map 调试: 插件: devtool webpack.SourceMapDevToolPlugin webpack.EvalSourceMapDevToolPlugin开发环境配置值development:eval eval-source-mapcheap-eval-source-mapcheap-module-eva...原创 2018-07-31 15:06:40 · 6282 阅读 · 0 评论 -
webpack环境 -- 开发环境和生产环境的区分
开发环境的需求:模块热更新 sourceMap 接口代理 代码规范检查生产环境的需求提取公共代码 压缩混淆 文件压缩/base64编码 去除无用的代码二者共同点: 同样的入口 同样的代码处理(loader处理) 同样的解析配置使用webpack-merge拼接开发环境和生产环境: 配置文件: webpack.dev.conf.js webpack.p...原创 2018-07-31 16:19:52 · 8021 阅读 · 0 评论 -
webpack 打包结果分析
官方工具: offical Analyse Tool 运行命令: mac: webpack –profile –json >stats.json window:webpack –profile –json | Out-file’stats.json’ -Encoding OEM生成json文件后上传到 http://webpack.github.io/anal...原创 2018-08-01 13:48:22 · 3182 阅读 · 0 评论 -
webpack - 打包速度优化
方法一: 区分第三方代码(vender)和业务代码(app) DllPlugin DllReferencePlugin 这两个插件设置打包好的第三方代码不再打包 第一步: 在build文件中新建一个webpack.dll.config.js 第二部: 配置webpack.dll.config.js const path = require('path'); cons...原创 2018-08-01 14:38:59 · 1214 阅读 · 0 评论 -
webpack -- 长缓存优化
场景一: 改变业务代码, 第三方(vendor)不变化解决: 1. 提取第三方代码 2. 将hash –> chunkhash 3. 提取 webpack runtimevar path = require('path')var webpack = require('webpack')module.exports = { entry:{ main:'...原创 2018-08-01 15:15:30 · 2146 阅读 · 0 评论 -
webpack 多页面配置 -- 多配置和单配置
多配置目录: src – css \ index.html \ pages \ components pages: a.js b.js c.js css : a.css b.css c.css components: module.jsa.js页面:import react from 'react'import moduleA from '../components/modu...原创 2018-08-01 16:25:13 · 1380 阅读 · 0 评论 -
webpack基础--- 处理第三方js库
场景: 使用cdn 和本地文件 使用 webpack.providePlugin imports-loader 当第三方JS库是在自己定义的文件夹中, 要用resolve配置一下别名使用插件:resolve:{ alias:{ jquery$:path.resolve(__dirname,'src/libs/jquery.min.js') ...原创 2018-07-31 11:20:32 · 1125 阅读 · 0 评论 -
webpack基础 -- 字体文件处理
使用 file-loader url-loader –save-devrules:{ { test:/\.(eot|woff2|woff|ttf|svg)/, use:[ {loader:'url-loader', options:{ name:'[name][hash:5...原创 2018-07-31 10:09:42 · 1830 阅读 · 0 评论 -
webpack基础 -- Tree Shaking
作用: 常规优化 \ 引入第三方库中的某一个功能 ; 将项目中没用到的代码剔除. 优化第三方库时注意: 如果是用module.export方式写的, 可以用treeShaking, 否则要借助插件才能进行优化.分为两种: JS Tree Shaking 和 CSS Tree ShakingJS Tree Shaking用到 webpack.optimize.Uglif...原创 2018-07-17 15:16:47 · 511 阅读 · 0 评论 -
webpack基础 -- 图片处理
需要的loader: url-loader file-loader img-loader postcss-sprites原创 2018-07-17 16:13:51 · 723 阅读 · 0 评论 -
webpack环境 -- webpack-dev-server 远程代理
webpack-dev-server安装 npm install webpack-dev-server –save-dev 参数: inline: true, // 默认为true, false时页面顶端有一个状态条, 显示的是页面的打包状态 contentBase: //提供内容的路径,false为本地路径 port: // 监听的端口号 hi...原创 2018-07-17 17:43:04 · 1235 阅读 · 2 评论 -
webpack基础 --打包js
webpack 打包js通过 命令行工具打包: webpack app.js boundle.js; 打包完成后会在同目录下生成boundle.js. app.js: 入口文件; boundle.js: 打包好的文件,原创 2018-07-12 14:00:24 · 905 阅读 · 0 评论 -
webpack基础 -- 编译ES6
webpack编译ES6安装babel: npm install babel-loader babel-core –save-dev原创 2018-07-12 14:32:59 · 458 阅读 · 0 评论 -
webpack基础 -- 编译Typescript
编译Typescript (JS的超集)安装: npm install typescript ts-loader –save-dev (官方) npm install awesome-typescript-loader –save-dev (第三方)配置: tsconfig.json webpack.config.js ...原创 2018-07-12 16:35:49 · 607 阅读 · 0 评论 -
webpack基础 -- 打包公共代码
打包公共代码使用: CommonsChunkPlugin; 插件提取注意: plugins中 可以有多可 CommonsChunkPlugin 分别提取自己写的和第三方的; 将自己写的公共代码放在前面提取, 第三方的代码放在后面提取,...原创 2018-07-12 17:20:44 · 710 阅读 · 0 评论 -
webpack基础--代码分割和懒加载
代码分割和懒加载内置方法和Loaderrequire.ensure()内置方法:require.ensure([dependencies], callback,errorCalback,chunkName) 动态加载代码 参数: dependencies: 依赖项, 是一个数组, 不会执行 callback: 在这里执行代码 errorCallback: 可省略 chunkN...原创 2018-07-13 10:47:40 · 1715 阅读 · 0 评论 -
webpack基础 -- css相关处理
css的处理 相关loader : 1.style-loader(处理标签, 生成插入html) –&gt; style-loader/url style-loader/useable 2.css-loader (处理js引入css) 安装: npm install style-loader css-loader –save-dev准备页面: app.j...原创 2018-07-13 14:40:28 · 165 阅读 · 0 评论 -
webpack基础 -- Less / Sass
less需要的loader: style-loader css-loader less-loader 另外需要安装less 安装: npm install style-loader css-loader less-loader less –save-dev在写loader的时候要注意顺序, loader是从后往前执行的 rules:[ { ...原创 2018-07-13 15:38:51 · 308 阅读 · 0 评论 -
webpack基础 -- 提取css
提取css需要的插件 : extract-text-webpack-plugin 安装: npm install extract-text-webpack-plugin –save-dev原创 2018-07-13 15:53:04 · 896 阅读 · 0 评论