![](https://img-blog.csdnimg.cn/20200422095833656.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
webpack
webpack学习
舜岳
不积跬步无以至千里 v: shunyue1321
展开
-
error:chunkgroup.addoptions:no option merge strategy for name
也就是给 entry 名加一个前缀,以防和 webpack 打包内部 chunk 名字冲突。原创 2022-08-31 00:47:55 · 440 阅读 · 0 评论 -
webpack 不打包外部模块
比如:xx.js 引入如下:let $ = require('jquery')console.log($)但是我的 jquery 是通过 cdn 直接加载到 html 内部的所以我不需要重复打包 jquery 增加包的体积我们可以通过 webpack 配置不让其打包:// webpack.config.jsmodule.exports = { externals: { // key 不需要打包的模块名 value: 导出的全局变量名 'jquery': 'jQuery',原创 2021-11-30 14:10:49 · 1496 阅读 · 0 评论 -
webpack 自动引入常用模块
webpack 自动引入常用模块描述:比如 lodash 这种库,要用时每个 js 文件都需要如下引入import _ from 'lodash'console.log(_.join(['1', '2'], '/'))怎么才能不引入 lodash 也能直接 _.join 等方法来使用 lodash 呢?方法一: (模块局部引入)const webpack = require('webpack ')module.exports = { ... plugins: [ ...原创 2021-11-30 14:00:48 · 936 阅读 · 0 评论 -
webpack 把 source-map 放本地调试生产代码,source-map 不上传到生产环境
webpack 把 source-map 放本地调试生产代码,source-map 不上传到生产环境方法一:webpack.config.jsconst webpack = require('webpack ')const FilemanagerPlugin = require('filemanager-webpack-plugin')module.exports = { devtool: false, // 不在此生成, 使用插件生成 source-map plugins: [原创 2021-11-30 12:27:41 · 1666 阅读 · 0 评论 -
webpack配置自定义loader
webpack配置自定义loader:方法一:设置自定义loader模块引入路径, 引入my-loader时去对应路径获取loader// webpack.config.jsmodule.exports= { resolveLoader: { alias: { 'my-loader': path.resolve('./loaders/my-loader.js') } }, module: { rules: [ { test: /\.cs原创 2021-04-24 21:15:01 · 726 阅读 · 0 评论 -
webpack配置devServer配置https代理与证书
浏览器如果需要开发某些特定功能,需要https浏览器才会给予功能权限, 则开发时我们需要在https环境下面是配置一个webpack devServer的https环境//webpack.config.jsmodule.exports = { ... devServer: { port: 8080, proxy: [{ context: ['/api'], //将 "https://urlname.com:8080/api" 转发到 "https://127.0.0原创 2021-01-17 22:03:29 · 9560 阅读 · 1 评论 -
webpack打包入口指定某文件夹内所有js作为入口文件
webpack.config.js// webpack.config.jsconst path = require('path')const glob = require('glob')module.exports = { // 指定 packs 文件夹下的 js 文件作为入口文件 // glob.sync 获取改文件夹内的所有js文件路径 entry: glob.sync("./packs/*.js").reduce((entries, p) => { const na原创 2021-01-17 21:47:26 · 546 阅读 · 0 评论 -
Webpack5 新功能 Module Federation 用法
Webpack5 新功能 Module Federation 的作用就是:让不同项目的模块可以通过远程提供给其它项目使用 而这个功能在一个叫ModuleFederationPlugin 插件内实现ModuleFederationPlugin 插件Module Federation 模块共享整体是通过ModuleFederationPlugin这个插件串联起来的。Remote: 提供模块共享服务Host: 获取共享的模块原理图如下:Remote 配置://webpack.config.js原创 2020-12-27 10:59:00 · 4808 阅读 · 2 评论 -
webpack配置 node_modules .vue 支持 es7 语法
安装:npm install -D babel-loader @babel/core @babel/preset-env webpack vue-loader新版本 babel-loader 默认支持es7语法!如果需要给 node_modules 内的文件支持es7 则需要如下 正确示范 内配置如果只是单纯支持 es7 则不需要配置 include正确示范:// webpack.config.js:const VueLoaderPlugin = require('vue-loader/l原创 2020-12-25 11:18:15 · 2077 阅读 · 0 评论 -
webpack dll如何单独打包第三方库
1. 项目根目录创建webpack.dll.js文件//webpack.dll.jsconst { resolve } = require('path')const { webpack } = require('webpack')module.exports = { entry: { //这里以单独打包jquery库为例 jquery: [ 'jquery' ] }, output: { filename: '[name].js', //打包后的文件名 path:原创 2020-11-28 20:40:27 · 588 阅读 · 0 评论 -
commonjs, es6 module什么是循环依赖?
什么是循环依赖?循环依赖是指模块A依赖于模块B,同时模块B依赖于模块A。比如下面这个例子:// foo.jsconst bar = require('./bar.js');console.log('value of bar:', bar);module.exports = 'This is foo.js';// bar.jsconst foo = require('./foo.js');console.log('value of foo:', foo);module.exports =原创 2020-11-14 17:23:13 · 508 阅读 · 0 评论 -
Cannot read property bindings of null 解决方法
安装@babel/preset-envyarn add @babel/preset-env或npm install @babel/preset-envwebpack.config.js:presets: ["env"]替换成presets: ["@babel/preset-env"]如下:{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/, //排除掉node_modules下的js文件,即不解析原创 2020-06-18 17:18:22 · 5759 阅读 · 1 评论 -
webpack-dev-middleware 作用
webpack-dev-middleware 作用:在启动node后端服务时自动启动webpack打包相关程序例子:const webpack = require('webpack');const middleware = require('webpack-dev-middleware');//参数引入配置好const compiler = webpack({'./webpack.co...原创 2020-01-11 19:01:55 · 1074 阅读 · 0 评论 -
cross-env NODE_ENV=development作用
cross-env 作用:它是运行跨平台设置和使用环境变量的脚本当我们使用 NODE_ENV = production来设置环境变量的时候,大多数windows命令会提示将会阻塞或者异常,或者,windows不支持NODE_ENV=development的这样的设置方式,会报错。因此cross-env 出现了。我们就可以使用 cross-env命令,这样我们就不必担心平台设置或使用环境变...原创 2020-01-11 17:15:13 · 13074 阅读 · 0 评论