webpack 实战总结

一、相关配置

1. 调试配置：项目中调试

• 场景：

  • webpack 打包代码后，不利于代码调试；通过相关配置，webpack 打包项目后，可以生成 sourcemap文件、或者将 sourcemap 文件融入到项目代码中

  • sourcemap 文件的作用： 独立的 sourcemap 文件是以 .map 为后缀的文件；便于 webpack 打包的代码，进行错误调试

• devtool 选项： 在 webpack.config.js 中配置

• 四种选项：

  • source-map：

    • 优势： 生成单独文件（一个完整且功能完全的文件），包括行、列；这个文件具有最好的source map

    • 缺点： 但是它会减慢打包速度

  • cheap-module-source-map：

    • 优势： 生成单独文件（一个不带列映射的map），包括行、不包括列；提高了打包速度（因为不带列映射）

    • 缺点： 开发者工具中 只能对应到具体的行，不能对应到具体的列；不利于调试

  • eval-source-map：

    • 优势： 将 sourcemap 文件打包到项目代码中，包括行、列；（在项目代码中 生产干净的完整版的sourcema）

    • 缺点： 对打包后输出的JS文件的执行具有性能和安全的隐患；生产阶段一定不要使用（会直接将调试代码直接打包到线上）

  • cheap-module-eval-source-map：

    • 优势： 将 sourcemap 文件打包到项目代码中（一个不带列映射的map），包括行、不包括列；*最快的生产source map的方法*

    • 缺点： 对打包后输出的JS文件的执行具有性能和安全的隐患

• 简述四种打包模式：

  • 以上四种打包模式：由上到下 打包速度越来越快，不过同时也具有越来越多的负面作用；较快的打包速度的后果就是对执行和调试有一定的影响

  • 建议： 大型项目中 可以使用source-map；中小型项目 使用eval-source-map；

• 相关代码：

// webpack.config.js 配置文件中 

module.exports = {
    devtool: 'eval-source-map',
}

2. 指令传参：开发环境、生产环境 打包

• 指令 传参：

  • 如下：分别执行指令 npm run dev、npm run build ；都会执行 webpack 打包

  • webpack 配置项中：会根据传入的参数 dev、build 来做出相应判断

// window 系统下：传参

"scripts": {
    "server": "webpack-dev-server --open",
    "dev":"set type=dev&webapck",
    "build": "set type=build&webpack"
},

// mac 系统下：传参

"scripts": {
    "server": "webpack-dev-server --open",
    "dev":"export type=dev&&webpack",
    "build": "export type=build&&webpack"
},

• webpack 配置项中：会根据传入的参数 dev、build 来做出相应判断

// node的语法来读取type的值，然后根据type的值用if–else判断

console.log( encodeURIComponent(process.env.type) );    // 输出传入的 type 值

if(process.env.type== "build"){
    // 生产环境
    var website={
        publicPath:"http://192.168.0.104:1717/"
    }
}else{
    // 开发环境
    var website={
        publicPath:"http://cdn.jspang.com/"
    }
}

3. webpack 配置 模块化

• 注意： webpack 配置文件 webpack.config.js 中，引入模块必须用 require（使用 import 引入会报错）

• 结合 指令传参： 可以将开发环境下的配置、生产环境下的配置 分别模块化；易于后期维护

4. 项目中使用 第三方类库（单独引用、全局引用）

• 方式一（模块中单独引用）： 脱离 webpack，在模块中使用 import 引入，然后使用

import $ from 'jquery';

• 方式二（项目中全局引用）：webpack 配置 webpack.ProvidePlugin 插件（weboack 自带的插件），模块中不需要引入，直接使用

// webapck.config.js 文件中配置如下：

const webpack = require('webpack');

plugins:[
    new webpack.ProvidePlugin({
        $:"jquery"
    })
],

• 二者比较：

  • 使用方面：

    • 单独引用：每次使用都需要引用

    • 全局引用：每次直接使用即可

  • 打包优化：

    • 单独引用：模块中引用 第三方库，但没使用；打包时 依旧会将 第三方库打包到项目代码中

    • 全局引用：三方库没使用；打包时 不会将 第三方库打包到项目代码中

5. 修改文件 自动打包（而不是 通过启动 本地服务 自动打包） webpack --watch

• 场景需求： 在不启动本地服务的情况下，实现 每次修改文件后 自动完成打包

• wbepack 配置文件

  • 坑： 在配置 watchOptions 中的 ignored 时，不需要加双引号

// webapck.config.js 文件中配置如下：

watchOptions: {
        poll: 1000,                 // 检测的时间间隔（毫秒）；是否修改了文件，有修改自动打包
        aggregateTimeout: 500,      // 防止重复保存而发生重复编译错误。这里设置的500是0.5秒内重复保存，不进行打包操作
        ignored: /node_modules/,    // 不监听的目录 （坑：值不需要加 双引号）      
    }

• package.json 配置文件

// package.json 文件中配置如下：

"scripts": {
    " build": "webpack --watch"
  },

• 执行命令 npm run build，在不启动本地服务的情况下,每次修改代码 保存后 webpack 自动打包

6. 打包后的 JS 代码中 首行 添加文字描述

• 场景需求： 有的 团队组长要求，每个提交的 打包好的 JS 代码，在第一行写上自己的名字

• 配置版权插件 webpack.BannerPlugin

// webapck.config.js 文件中配置如下：

const webpack = require('webpack');

plugins:[
    new webpack.BannerPlugin('版权所有')
]

• 执行打包命令，到 dist 文件夹下，看 js 文件，第一行出现了 “版权所有” 的注释，如下：
  

7. webpack 优化打包 小细节

细节一：引入第三方模块

• 易忽略： 代码中 通过 import 引入了第三方模块，但没有使用；webpack 打包时，依旧会将第三方模块打包到项目中

• 按需打包： 全局方式 引入第三方包，项目中如果没有使用，打包不会打到项目代码中

细节二：抽离第三方库（项目中很有必要）

• 解决方案： webpack 多入口配置 + webpack 内置的 优化插件 webpack.optimize.CommonsChunkPlugin

• webpack.config.js 配置文件中

// 配置多入口
entry:{
    entry:'./src/entry.js',
    jquery:'jquery'
},


// 配置 webpack 优化插件
plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        name:['jquery'],                    //name对应入口文件中的名字，我们起的是jQuery
        filename:"assets/js/[name].js",     //把文件打包到哪里，是一个路径
        minChunks:2                         //最小打包的文件模块数，这里直接写2就好
    }),
]

8. 静态资源 集中输出

• 场景需求： 组长要求，项目中 引用的图片资源 或者 其他静态资源，需要保存到服务器上；这是就需要我们，进行 webpack 相关配置，将 没有使用的静态资源，直接打包到 指定文件夹

• 插件： copy-webpack-plugin

• 安装： npm install copy-webpack-plugin --save-dev

// webpack.config.js 中配置

const copyWebpackPlugin= require("copy-webpack-plugin");


// 相关配置
plugins: [
    new copyWebpackPlugin([
        {
            from: __dirname + '/src/static',    // 要打包的静态资源目录地址
            to: './static'                      // 要打包到的文件夹路径
        }
    ])
]

• __dirname 相关描述：__dirname 是指项目目录下，是node的一种语法，可直接定位到项目的根目录

二、问题解决

1. 解决热更新不生效的问题

• 配置 webpack.HotModuleReplacementPlugin 插件

• webpack.config.js 配置中相关代码如下：

plugins: [
    new webpack.HotModuleReplacementPlugin()
]