Skip to main content

通用配置

1、不同环境的打包配置#

在上文“基本使用”之中我们初步学习了WebPack配置文件webpack.config.js的打包模式、入口，输出等配置；

important

通常项目中是要区分development(开发环境) 和 production(生产环境)的，这两个环境下的构建目标存在着巨大差异。 由于要遵循逻辑分离，建议为每个环境编写彼此独立的 webpack 配置文件

1.1、不同环境打包差异#

开发环境需要：强大的 source map 和一个有着 live reloading(实时重新加载) 或 hot module replacement(热模块替换) 能力的 localhost server。

生产环境关注点在于压缩 bundle、更轻量的 source map、资源优化等，通过这些优化方式改善加载时间。

1.2、不同的配置文件#

我们将 生产环境 和 开发环境 做了区分，但是还要保留一个 common(通用配置)来遵循不重复原则。最后将通用配置和任意环境配置合并即可，即将开发环境和生产环境不同的打包需求配置在各自的配置文件中，通用的就配置在common配置中

（1）、配置文件(删除原来的：webpack.config.js)

  • 开发环境配置文件：webpack.dev.js
  • 生成环境配置文件：webpack.prod.js
  • 环境通用配置文件：webpack.common.js

1.3、合并配置文件#

为了将这些配置合并在一起，我们将使用一个名为 webpack-merge 的工具。此工具会引用 "common" 配置，因此我们不必再在环境特定的配置中编写重复代码。

（1）、安装webpack-merge

npm install --save-dev webpack-merge

（2）、编写不同环境配置文件

webpack.common.js 将打包入口和输出配置在通用配置中再通过merge在其他环境中合并即共用
  const path = require('path');    module.exports = {    entry: {      app: './src/index.js',    },    output: {      filename: '[name].bundle.js',      path: path.resolve(__dirname, 'dist'),      clean: true,    },  };
webpack.dev.js具体配置将在下文配置
 const { merge } = require('webpack-merge'); const common = require('./webpack.common.js');
 module.exports = merge(common, {   mode: 'development', });
webpack.prod.js具体配置将在下下文配置
 const { merge } = require('webpack-merge'); const common = require('./webpack.common.js');
 module.exports = merge(common, {   mode: 'production', });
注意以上配置就共用的一样的入口文件配置和输出配置，当然我们可以为不同环境配置不同的入口和出口，即将common中的入口输出移除配置到各自的环境配置文件中即可，包括其他的配置项也是一样的，根据项目需求定

1.4、修改 NPM Scripts脚本#

（1）、配置打包脚本 在项目package.json文件中配置如下脚本来执行webpack的打包命令

//打开package.json文件找到"script"属性在该属性下配置
"scripts": {      "start": "webpack --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"  },

（2）、按照开发环境构建

npm run start

（3）、按照生产环境构建

npm run build

2、打包html资源自动引入其他资源#

通过HtmlWebpackPlugin插件打包index.html到dist目录

之前我们是在项目根目录下创建的index.html的当通过webpack打包后还需要手动在index.html中引入dist文件夹下的bundle.js文件，而且当我们发布代码时我们要带上dist文件夹下的bundle.js文件外还要带上这个index.html文件，非常不方便

因此webpack提供插件将index.html文件打包到dist文件夹（并将打包后的bundle.js文件引入）

即HtmlWebpackPlugin该插件将会默认在dist文件夹下创建一个空的没有结构的html文件，当然我们也可以指定模板进行创建

2.1、安装HtmlWebpackPlugin插件#

webpack的loader主要是用于转换除js和json格式外的其他格式文件的翻译器 webpack的plugin是插件是对webpack的扩展比如打包优化、文件压缩等 插件要先下载 后引用 再使用

npm install --save-dev html-webpack-plugin

2.2、配置HtmlWebpackPlugin插件#

webpack.common.js
const HtmlWebpackPlugin=require('html-webpack-plugin')
module.exports={  plugins:[    //该插件在打包时默认创建空的html文件并引入打包输出的所有资源    new HtmlWebpackPlugin({      //指定复制的模板创建html文件并引入打包输出的所有资源      template:"./src/index.html",      //压缩html可选      minify:{        //移除空格        collapseWhitespace:true,        //移除注释        removeComments:true
      }    })  ]
}

3、打包字体图标#

3.1、安装file-loader#

npm install --save-dev file-loader

3.2、配置#

webpack.common.js
module.exports={  module:{    rules:[      {        //排除css、js、html、less文件后的其他文件        exclude:/\.(css|js|html|less)$/,        loader:"file-loader",        options:{        //资源重命名        //[hash:10]取图片的hash的前10位        //[ext]原文件后缀名        name:'[hash:10].[ext]',        //指定输出文件夹        outputPath:"media"        }      }    ]  }
}
文章目录