![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
LLL_LH
记录一些学习心得
展开
-
vue自定义全局设置
vue2.x中在static下新建一个serverConfig.js,vue3中在public下新建一个serverConfig.jsconst win = window || globalwin.apiConfig = { developmentURL: 'http://192.168.0.101:8080/wx/', productionURL: 'http://xxxxx....原创 2020-03-05 14:57:34 · 628 阅读 · 0 评论 -
webpack4懒加载
懒加载,即在需要调用的时候才进行加载let button = document.createElement('button');button.innerHTML = 'hello';button.addEventListener('click', function () { console.log('click'); import('./a.js').then(data =>...原创 2020-01-13 16:48:47 · 455 阅读 · 0 评论 -
webpack4抽离公共代码
开发多页面应用时,我们有可能会在几个页面中引用相同的模块,相同的模块被多次下载会造成资源浪费,如果把这些相同的模块抽取出来,只下载一次,然后缓存起来,这样就可以避免重复下载。假如有a.js和b.js两个模块,然后index.js和mian.js这两个文件都要引用,这是就需要把a.js和b.js抽取出来为一个公共的js,然后再index.js和main.js中引入1、index.jsi...原创 2020-01-13 16:23:49 · 645 阅读 · 0 评论 -
webpack之DllPlugin提高打包速度
在webpack进行打包的时候,对于react、react-dom、vue、vuex等不会改变的依赖,和我们自己的代码分开打包,这样当我们修改自己的代码的时候,webpack只需要打包我们自己的代码,而第三方依赖第一次打包后,如果没有升级或者其他改变,那么就不需要在打包了,这样可以提高打包的速度入口文件index.js:import React from 'react';import ...原创 2020-01-13 12:04:33 · 331 阅读 · 0 评论 -
moment.js的简单用法
1、下载npm install moment2、在组件中引入,注意引入moment时默认引入所有语言包,所以手动设置引入的语言包提高性能import moment from 'moment';// 手动引入所需要的语言包import 'moment/locale/zh-cn';// 设置语言格式moment.locale('zh-cn');// 距离现在有多少天l...原创 2020-01-13 10:38:12 · 698 阅读 · 0 评论 -
webpack-merge合并webpack配置文件
下载插件npm install webpack-merge -D1、webpack.config.base.js开发环境和生产环境的共同配置let path = require('path');let HtmlWebpackPlugin = require('html-webpack-plugin');const { CleanWebpackPlugin } = requir...原创 2020-02-19 10:04:57 · 8616 阅读 · 0 评论 -
webpack跨域请求
1、devServer的proxy代理webpack.config.jsdevServer: { proxy: {// 重写方式,代理转发到http://localhost:3000 '/api': { target: 'http://localhost:3000', pathReWrite: { '^/api': '' } ...原创 2020-01-09 17:35:03 · 169 阅读 · 0 评论 -
webpack4.0中使用clean-webpack-plugin,copy-webpack-plugin
1、安装yarn add clean-webpack-plugin -Dyarn add copy-webpack-plugin -D2、webpack.config.jsconst { CleanWebpackPlugin } = require('clean-webpack-plugin');const CopyPlugin = require('copy-web...原创 2020-01-09 16:13:39 · 822 阅读 · 0 评论 -
webpack全局使用jquery
1、安装yarn add jquery -S2、webpack.config.jslet webpack = require('webpack');module.exports = { plugins: [ ... new webpack.ProvidePlugin({ $: 'jquery', // jquery把$暴露出来 ...原创 2020-01-08 16:24:31 · 243 阅读 · 0 评论 -
regeneratorRuntime is not defined错误
这个错误是因为使用了es7语法,需要babel转换注意:不建议使用babel-polyfill,因为这个太大了安装:npm install --save-dev @babel/plugin-transform-runtimenpm install --save @babel/runtimewebpack.config.jsmodule: { rules: [...原创 2020-01-08 14:57:03 · 614 阅读 · 0 评论 -
uglifyjs-webpack-plugin报错ERROR in bundle.js from UglifyJs Unexpected token: name «str», expected:
1、下载npm i -D uglifyjs-webpack-plugin2、在webpack.config.jsconst UglifyJsPlugin = require('uglifyjs-webpack-plugin'); module.exports = { mode: 'production', optimization: { minimizer: [...原创 2020-01-08 13:44:18 · 3033 阅读 · 0 评论 -
terser-webpack-plugin替代uglifyjs-webpack-plugin
使用uglifyjs-webpack-plugin压缩js报错Error infromUglifyJs Unexpected token: xxx因为uglifyjs不支持es6语法,所以用terser-webpack-plugin替代uglifyjs-webpack-pluginterser-webpack-plugin安装:yarn addterser-webpack-pl...原创 2020-01-08 11:17:38 · 13168 阅读 · 2 评论 -
webpack4、postcss-loader自动添加前缀使用
1、安装npm i -D postcss-loader autoprefixer2、新建postcss.config.js,与webpack.config.js同级module.exports = { plugins: [ require('autoprefixer') ]}3、webpack.config.jsconst path = require(...原创 2020-01-08 10:19:16 · 1132 阅读 · 0 评论 -
html-webpack-plugin插件的用法
学习webpack时,接触到了html-webpack-plugin这个插件,记一下使用方法1、安装npm install html-webpack-plugin --save-dev2、使用,新建一个webpack.config.js文件const path = require('path');const htmlWebpackPlugin = require('html-...原创 2019-06-10 12:00:54 · 430 阅读 · 0 评论