webpack开发全家桶

分类：Webpack作者：michael_yqs

webpack开发全家桶

开发环境配置

webpack-dev-server

webpack-dev-server 集成 自动编译 和 自动刷新浏览器 等功能
npx webpack-dev-server --自动编译打包，并将打包结果放在内存中
npx webpack-dev-server --open–自动编译打包，并将打包结果放在内存中，启动http server，打开浏览器

配置 devServer 指定静态资源服务器路径

module.exports = {
  devServer: {
    contentBase: './public'
  }
}

配置代理服务，解决开发环境接口跨域问题

module.exports = {
  devServer: {
    contentBase: './public',
    proxy: {
      // 请求路径的前缀：规则配置
      '/api': {
        // http://localhost:8080/api/users -> https://api.github.com/api/users
        target: 'https://api.github.com',
        // 不能使用 localhost:8080 作为请求 GitHub 的主机名
        changeOrigin: true, // 以代理目标的主机名 去请求
        // http://localhost:8080/api/users -> https://api.github.com/users
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

配置 Source Map

sourceMap 文件映射了转换后的代码与源代码之间的关系，解决了调试应用，报错无法定位的问题。
在转换后的代码文件中的最后一行会自动添加注释：
//# sourceMappingURL=jquery.min.map
配置方式：webpack.config.js增加devtool:'source-map
webpack 支持12种 sourceMap 方式，每种效率和效果各不相同；
具体选用规则：

  • 开发模式：cheap-module-eval-source-map
  • 生产环境：none 或 nosources-source-map
    详细信息参考官网source-map

HMR — Hot Module Replacement

文件修改后重新打包，然后自动刷新浏览器，页面中原有的信息就会被刷新掉（输入框中的数据）

使用方式

webpack.config.js中增加配置：

module.exports = {
  devServer: {
    hot: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
}

HMR 注意事项

  1. 处理 HMR 的代码报错会导致自动刷新，解决方法：使用hotOnly: true代替hot: true
  2. 没启用 HMR 的情况下，HMR API 报错。
    module.hot方法是 HMR 插件提供的，如果没有开启 HMR 就会报错：Cannot read property 'accept' of undefined。
    所以使用之前要做空值判断：
    if (module.hot) { // ... }
    如果没有开启 HMR，上面这种代码经过 webpack 打包后会变成：
if (false) {}

多环境配置

两种方式：

  1. 配置文件根据环境不同导出不同配置
  2. 一个环境对应一个配置文件。

根据环境不同导出不同配置

配置文件导出一个函数，返回一个配置对象。函数接收两个参数：通过 cli 传递的环境名参数env，运行 cli 过程中所传递的所有参数argv

module.exports = (env, argv) => {
  const config = {
    mode: 'none',
    entry: './src/main.js',
    devtool: 'source-map',
    output: {
      filename: 'bundle.js',
      path: path.join(__dirname, 'dist/')
    },
    module: {
      rules: [
        {
          test: /.js$/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        },
        {
          test: /.css$/,
          use: [
            'style-loader',
            'css-loader'
          ]
        },
        {
          test: /.png$/,
          use: {
            loader: 'url-loader',
            options: {
              limit: 10 * 1024
            }
          }
        }
      ]
    },
    plugins: [
      new CleanWebpackPlugin(),
      new HtmlWebpackPlugin({
        template: './src/index.html'
      })
    ]
  }

  if (env === 'production') {
    config.mode = 'production',
    config.devtool = 'nosources-source-map',
    config.plugins = [
      ...config.plugins,
      new CleanWebpackPlugin(),
      new CopyWebpackPlugin(['public'])
    ]
  }
  return config
}

一个环境对应一个配置文件

webpack.dev.js//开发环境配置
webpack.prod.js//生产环境配置
可将共同的配置文件提取到webpack.common.js中
然后用webpack-merge合并配置：

// webpack.prod.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'production'
})

DefinePlugin

为代码注入全局成员，直接替换代码中的同名变量成员
在 production 模式下，DefinePlugin默认启用，并往代码中注入了 process.env.NODE_ENV

示例

声明API_BASE_URL

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      API_BASE_URL: '"https://api.example.com"',//DefinePlugin 要求注入的值是一个 JavaScript 代码片段
      //API_BASE_URL: JSON.stringify('https://api.example.com'),// 字符串,与上面API_BASE_URL的声明是等价的
      PARAMS: { // 对象
        name: 'zs',
        age: 20
      },
      NUMBER: 30, // 数字
      BOOLEAN: true, // Boolean
      FUNC: function() {
        console.log('func')
      }
    })
  ]
}

打包后：

console.log("https://api.example.com");
const params = Object({"name":zs,"age":20});
const number = 30;
const boolean = true;
const func = (function() {
        console.log('func')
      });

webpack优化

Tree Shaking

去除冗余代码，优化生产环境的代码。在生产模式下会自动开启
Tree-shaking 不是某个配置选项，是一组功能搭配使用后的优化效果
非生产模式开启Tree Shaking，通过 optimization配置选项
optimization： 集中配置 webpack 优化功能的选项

module.exports = {
  optimization: {
    usedExports: true, // 只导出外部使用的成员
    minimize: true // 压缩代码
  }
}

tree-shaking 是针对 ES Module 的模块代码进行处理，而 babel 中有些功能会将 ES Module 转为 CommonJS，从而导致 tree-shaking 失效。可以通过配置 preset-env 来解决

odule.exports = {
  module: {
    rules: [
      {
        test: /.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            // presets: ['@babel/preset-env']
            presets: [
              // 嵌套数组
              // ===============   关闭 ESModule 转化为 CommonJS的功能
              ['@babel/preset-env', { modules: false }]
            ]
          }
        }
      }
    ]
  }
}

concatenateModules

尽可能的将所有模块合并输出到一个函数中，既提升了运行效率，又减少了代码的体积。

module.exports = {
  optimization: {
    usedExports: true, // 只导出外部使用的成员
    concatenateModules: true,
    minimize: true // 压缩代码
  }
}

sideEffects

sideEffects是指模块执行时，除了导出成员之外所做的其他事情
比如：

// components/index.js

export { default as Button } from './button.js';
export { default as Link } from './link.js';
export { default as Header } from './header.js';

上面代码只是导出了模块，没有做其他事情

// main.js

// 只想从 index.js 中导入 Button 组件，
// 但是 index.js 中又载入了所有的组件，
// 导致所有的模块都会被加载执行
import { Button } from './components/index.js';

若optimization 选项中配置 sideEffects 配置为 true，webpack 就会去检查当前项目的 package.json 文件中是否存在 sideEffects 字段，从而判断模块是否有副作用，如果没有副作用，这些没有用到的模块就不会被打包。

//webpack.config.js
module.exports = {
  optimization: {
    // 开启副作用检查
    sideEffects: true,
  }
}

//package.json中增加配置
{
  "sideEffects": false // 表明项目中没有副作用
}

使用 sideEffects，需要确保代码中真的没有副作用代码
上面的配置方式是全局的，实际开发中并不能确保整个项目里没有副作用代码，比如第三方插件的使用等，所以最好的方法是指定副作用检查的范围（模块）

//package.json
{
  "sideEffects": [
    "./src/extends.js",
    "*.css"
  ]//指定副作用规则
}

代码分割

所有模块一起打包会导致 bundle.js 太大，所以需要分包,按需加载

多入口打包

多入口打包一般适用于多页应用程序，一个页面对应一个打包入口，公共部分提取一起打包。

  1. entry配置为对象（如果是数组的话，就是把多个文件打包到一起。）
module.exports = {
  entry: {
    index: './src/index.js',
    album: './src/album.js'
  },
  output: {
    // [name] 占位符，最终会被替换成 entry 定义的文件名称
    filename: '[name].bundle.js'
  }
}
  1. html 文件中只引入对应的 bundle.js
    HtmlWebpackPlugin 默认会生成注入所有打包结果的 html；如果需要指定 html 所使用的bundle，可以使用 chunks 属性
module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
      filename: 'index.html',
      chunks: ['index']
    })
    new HtmlWebpackPlugin({
      template: './src/album.html'
      filename: 'album.html',
      chunks: ['album']
    })
  ]
}
  1. 提取公共模块
    对于不同模块引用到的公共模块，如：vue，jQuery，可以将他们提取出来，放在单独的文件中
    使用 webpack 的 optimization 选项的 splitChunks 属性配置
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all' // 表示把所有的公共模块都提取到单独的 bundle 文件中
      cacheGroups: {
        // 抽取自定义的公共模块
        commons: {
          name: 'commons'
        }
      }
    }
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'index',
      filename: 'index.html',
      template: './src/index.html',
      chunks: ['index', 'commons'] // commons 为公共模块
    }),
    new HtmlWebpackPlugin({
      title: 'album',
      filename: 'album.html',
      template: './src/album.html',
      chunks: ['album', 'commons'] // commons 为公共模块
    })
  ]
}

动态导入

需要使用到某个模块的时候，再加载这个模块。动态导入的模块会被自动分包

// ES Modules 动态导入成员的方式导入模块
import('./posts/posts').then(module => {
  // TODO: 使用模块
});

// 如果导入的模块是使用 默认导出的方式，需要将其解构出来
import('./posts/posts').then(({ default: posts }) => {
  // TODO: 使用模块
});

MiniCssExtractPlugin

提取 css 到到单独文件中（一般推荐css文件超过了 150KB 才使用）

module.exports = {
  plugins: [
    new MiniCssExtractPlugin()
  ]
}

由于该插件可以提取 css 到单独模块，所以不需要使用到 style-loader 了，取而代之的是使用该插件提供的 loader

module: {
  rules: [
    {
      test: /.css$/,
      use: [
        // 'style-loader',// 通过 style 标签注入
        MiniCssExtractPlugin.loader,
        'css-loader',
      ]
    }
  ]
}

OptimizeCssAssetsWebpackPlugin

压缩资源文件

  • 配置在 plugins 数组中
//webpack.config.js
module.exports = {
//...,other config
  plugins: [
  //...,
    new OptimizeCssAssetsWebpackPlugin()
  ]
}
  • 配置在 optimization.minimizer 数组中，由 minimize 选项控制，但这样会覆盖原有的压缩器，导致 js 的压缩功能不能使用
module.exports = {
  optimization: {
    minimizer: [
      new OptimizeCssAssetsWebpackPlugin()
    ]
  }
}

输出文件名 Hash

解决资源文件更新，浏览器缓存问题（控制文件名 hash 的长度 [contenthash:8]）
有以下几种使用方式：

  • [name]-[hash].bundle.js
    改变任一文件，打包后所有文件的文件名都会发生变化
  • [name]-[chunkhash].bundle.js
    同一路的打包，chunkhash 都是相同的。比如多入口配置的文件、按需引入模块。改动 moduleA.js，打包后，其对应的文件名发生改变，而其他不会变。
  • [name]-[contenthash].bundle.js
    根据文件输出的内容生成的hash，不同的文件，有不同的hash

原文地址：https://blog.csdn.net/Michael890818

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

umi 框架 如何配置 自定义 插件 和 loader
一准备工作umi为react的一个封装比较nice的脚手架。优点当然就是安装方便，开箱即用，集成了诸多好用功能，详见官网。当然缺点就是无法暴露原始的webpack.config.json文件，只能按照官方文档上特定的方法进行修改，而文档却并不完善。项目顺利进行大家笑嘻嘻，一旦遇到偏难怪需求，
webpack之shimming的应用(webpack.ProvidePlugin)
webpack在引入两个依赖的包时，可能需要使用shimming，意思是处理代码上的兼容1、在main.js中引入jqueryimport$from'jquery'importappendfrom'./append'//下面的给页面添加元素文件append()2、append.js使用main.js的$向页面中添加元素functionappDomFunc(){
webpack性能优化(TODO)
  Happypack (plugin)多线程使用loader编译文件treeshaking删除无用JS代码，依赖ESM规范source-map生产环境一定去掉process.env.XXX配置环境变量，区分各种编译环境splitchunks 代码分离去重DynamicImport动态加载js文件Hot-module-replacement开发环境热更新w
前端项目架构分析
一目录结构├──build//构建相关├──config//配置相关├──src//源代码│├──api//所有请求│├──assets//主题字体等静态资源│
2、管理资源
接着第一节的demo现在我们尝试整合一些其他资源，比如图像，看看webpack如何处理。在webpack出现之前，前端开发人员会使用grunt和gulp等工具来处理资源，并将它们从 /src 文件夹移动到 /dist 或 /build 目录中。同样方式也被用于JavaScript模块，但是，像webpack这样的工
面试题： Webpack 的 plugin 和 loader 有什么区别
webpack的打包原理识别入口文件通过逐层识别模块依赖(Commonjs、amd或者es6的import，webpack都会对其进行分析，来获取代码的依赖)webpack做的就是分析代码，转换代码，编译代码，输出代码最终形成打包后的代码什么是loaderloader是文件加载器，能够加载资源文件，并对这些文件进行
全面掌握Webpack4.0 (一)Webpack究竟是什么2 持续更新...
上一篇文章我们在一个demo中见到了webpack的身影，如果从未接触过webpack的同学学完了上一篇文章可能会觉得webpack只是一个“翻译官”，但事实上webpack可不仅仅可以‘翻译’代码,事实上，webpack是一个‘打包’工具，‘打包‘才是webpack的核心任务。打开webpack的官网：webpack中
webpack前端模块化打包工具(webpack打包css,url,babel等,配置Vue文件依赖,搭建本地服务器和发布项目)
注：本章将配合Vue详细讲解webpack前提条件1.在开始之前，请确保安装了Node.js和npm的最新版本。使用旧版本，你可能遇到各种问题，因为它们可能缺少webpack功能以及/或者缺少相关package包。在cmd中node-v,npm-v可查看对应的版本和安装情况。2.这里会用到ES6的模块化，如果你
vue webpack优化之路
前言、之前我认为对于项目的优化无非是从代码上去优化一些东西，比如循环呀函数式调用呀让你的代码看起来更加的简洁容易懂后来我在面试过程中不断有面试官不断地问了我这些问题所以自己就去研究了一下发现并不是我之前想的那样，一个好的webapck优化的胜过于你在整体代码上
vue03
##一、组件component###1.什么是组件？组件（Component）是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码组件是自定义元素（对象）###2.定义组件的方式方式1：先创建组件构造器，然后由组件构造器创建组件方式2：直接创建组件###3.组件的分
webpack
 #webpack5概述>webpack是一个现代javascript应用程序的**静态模块打包器(modulebundler)**>>vue-cli脚手架环境,集成了webpack,所以才能对各类文件进行打包处理[webpack官网](https://webpack.js.org/) ##webpack能做什么webpack是一个静态模块打包
webpack原理-实现webpack打包js
//这里导入webpack配置，我用对象的形式表示，当然entry属性上定义的文件要有//constconfig=require("./webpack.config");constconfig={entry:'./src/index.js'};const{join,dirname}=require("path");const{readFileSync,writeFileSync}=requi
vux-cli3 项目文件分析 webpack-bundle-analyzer
安装cnpminstallwebpack-bundle-analyzer-D 修改vue.config.jsmodule.exports={chainWebpack:config=>{if(process.env.use_analyzer){//分析config.plugin('webpack-bundle-analyzer')
webpack打包html插件html-webpack-plugin的使用
webpack打包html插件html-webpack-plugin的使用1.创建这样的测试目录结构1）index.html是即将被打包的文件，你可以随便写一些内容2）index.js是打包的入口文件，你可以写或不写内容2.webpack.config.js的代码如下：/***压缩html需要插件：html-webpack=plugin*插件使用方法：
vue init webpack tabbar创建vue项目时出现问题
vueinitwebpacktabbar创建vue项目时出现问题vue:无法加载文件C:\Users\dengqian\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本。C:\Windows\System32\WindowsPowerShell\v1.0，找到如上路径，以管理员身份运行powershell.exe即可输入set-ExecutionPolicyRemo
【vue+ECharts】在 webpack 中使用 ECharts
在webpack中使用ECharts【官网教程】1、使用如下命令通过npm 安装EChartsnpminstallecharts--save2、全局引用在main.jsimportechartsfrom'echarts'Vue.prototype.$echarts=echarts;3、运用<divstyle="width:60vw;height:280px;"ref="chart"&
解读 vue-cli 脚手架二：npm run build 的背后
如果没有看过我的上一篇文章，请先移步去看一下哈！时隔一年多，之前写的文章感觉大家还挺喜欢的，一直说要更新下一篇。但是一直没有机会，没时间，还有就是，感觉自己的技术，可能不足以支持我继续往下走。但是经过这个一年多的历练，感觉很多东西考虑的会更周全，不负期待！废话说一堆，步入正题
webpack 创建本地node服务
dist文件配置对应的路由名展示这样的效果可以创建一个本地的服务还可以进行代理项目开发是在src里进行代码逻辑编写./表示本地路径/表示绝对路径(nginx需要配置)
新建webpack-vue项目以及引入element ui组件
 1、用命令创建webpack模板项目vueinitwebpack 项目名，需要选是否的统一选否，所以的依赖手动添加  2、安装依赖vue-router,elementui,sass-loader,node-sass，axios插件安装路由：npminstallvue-router安装elementu
webpack打包后动态修改process.env
最近想把蘑菇博客部署到k8s上，作为一名java搬砖工，搬砖人不讲码德，biu一下就把后端各模块的dockerfile和chart包copy过来了，很快啊！接下来就可以愉快的使用helm管理蘑菇后端服务部署了。部署完后端服务后，准备制作前端镜像，发现前端打包后，无法动态读取系统环境变量，这很头疼，难不
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot