[南京校区]webpack 配置多页面应用【黑马web前端】

更新时间:2019年07月26日 11时15分24秒来源:黑马程序员论坛

做多页面应用。为了保证开发速度和开发效率，所以决定使用 webpack 做一套模块化配置方案。
如果有优化的地方，请在评论区指点出来，。

目录
|-- build                         webpack 配置
| |-- utils.js                   处理 webpack 配置的公共方法
| |-- webpack.base.conf.js       公共配置
| |-- webpack.dev.conf.js       开发环境配置
| |-- webapck.prod.conf.js       生产环境配置
| |-- webpack.rules.conf.js    文件处理规则
|-- dist                         存放变异后文件
|-- |
|-- src                            源文件
| |-- assets
| |-- pages
| | |-- index                首页
| | | |-- index.html       首页模板
| | | |-- index.js          首页入口文件
| htmlarrary.js                页面配置文件
复制代码多页面
多页面，首先最重要的就是处理多个 html 模板和对应的多个入口文件。
html 模板
在项目根目录创建一个 htmlarrary.js，用来存储页面配置：
// htmlarrary.js

module.exports = [
  {
_html: 'index',
title: '首页',
chunks: ['index', 'manifest', 'vendors'] // 页面用到的vendor模块
  },
  {
_html: 'login',
title: '登录',
chunks: ['login']
  }
]
然后在 /build/utils.js 创建 getHtmlArray 方法，用来自动生成多个模板的配置：
// /build/utils.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlArray = require('../htmlarray.js')

exports.getHtmlArray = function (moduleExportsPlugins) {

  // 根据模板配置生成 HtmlWebpackPlugin 需要的配置
  const getHtmlConfig = function (name, chunks, title) {
return {
   template: `./src/pages/${name}/index.html`,
   filename: `./${name}.html`,
   favicon: './src/assets/images/public/favicon.ico',
   title,
   inject: true,
   hash: true, // 开启hash
   chunks, // 页面要引入的包
   minify: process.env.NODE_ENV === 'development' ? false : {
      removeComments: true, // 移除HTML中的注释
      collapseWhitespace: true, // 折叠空白区域也就是压缩代码
      removeAttributeQuotes: true, // 去除属性引用
   },
};
  };

  // 循环创建模板配置
  htmlArray.forEach((element) => {
const { _html, chunks, title } = element
moduleExportsPlugins.push(new HtmlWebpackPlugin(getHtmlConfig(_html, chunks, title)))
  })
}
在 webpack.base.conf.js 中通过 getHtmlArray 添加多页面引擎配置：
const { getHtmlArray } = require('./utils.js')

module.exports = {
  // ... 相关配置
}

getHtmlArray(module.exports.plugins)
入口文件
在 /build/utils.js 创建 getEntry 方法，用来自动生成入口文件的配置：
// /build/utils.js
const glob = require('glob')

exports.getEntry = function () {
  const entry = {}
  // 读取src目录所有page入口
  glob.sync('./src/pages/*/*.js').forEach((name) => {
const start = name.indexOf('src/') + 4;
const end = name.length - 3;
const eArr = [];
const n = name.slice(start, end).split('/')[1];
eArr.push(name);
eArr.push('@babel/polyfill'); // 引入这个，是为了用async await，一些IE不支持的属性能够受支持，兼容IE浏览器用的
entry[n] = eArr;
  })
  return entry;
}
在 webpack.base.conf.js 中通过 getEntry 添加多入口配置：
// webpack.base.conf.js

const { getEntry } = require('./utils.js')

module.exports = {
  entry: getEntry(),
}
JS
JS 方面，我们一般有以下需求：

eslint 错误提醒；
ts-loader 解析 typescript 语法；
babel-loader 解析 ES6 语法。

针对以上需求，我们来配置一下子 rules，并且做一下延伸：
// webpack.rules.conf.js

module.exports = [
  {
test: /\.(js|ts)$/,
exclude: /node_modules/,
use: [
   {
      loader: 'babel-loader',
      options: {
      presets: [
         ['@babel/preset-env', {
            useBuiltIns: 'usage',
            targets: {
            chrome: '58',
            ie: '8'
            },
            corejs: 2
         }]
      ]
      }
   },
   {
      loader: 'ts-loader'
   },
   {
      loader: 'eslint-loader',
      options: {
      cache: true // 优化打包速度
      }
   }
]
  }
]

在生产环境，我们需要对 js 文件进行压缩，公共代码抽离，所以还需要在 webpack.prod.conf.js 中这样去优化一下：
// webpack.prod.conf.js

cconst merge = require('webpack-merge')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const baseConfig = require('./webpack.base.conf.js')

const prodConfig = {
  optimization: {
minimizer: [
   // 会导致 sourcemap 消失
   new UglifyJsPlugin({
      uglifyOptions: ({
      compress: false
      })
   }),
   new OptimizeCSSAssetsPlugin({})
],
splitChunks: {
   chunks: 'all',
   cacheGroups: {
      vendors: { // 抽离第三方插件
      test: /[\\/]node_modules[\\/]/, // 指定是node_modules下的第三方包
      name: 'vendors',
      priority: -10 // 抽取优先级
      },
      utilCommon: { // 抽离自定义
      name: 'common',
      minSize: 0, // 将引用模块分离成新代码文件的最小体积
      minChunks: 2, // 表示将引用模块如不同文件引用了多少次，才能分离生成新chunk
      priority: -20
      }
   }
},
// optimization.runtimeChunk 就是告诉 webpack 是否要把这部分单独打包出来，来优化缓存问题
runtimeChunk: {
   name: 'manifest'
}
  }
}

module.exports = merge(baseConfig, prodConfig)

CSS
CSS 方面，我们一般有以下需求：

postcss-loader 安装 autoprefixer 插件，自动进行兼容性处理；
sass-loader 解析 sass 语法；
MiniCssExtractPlugin 进行 css 压缩。

针对以上需求，我们来配置一下子 rules，并且做一下延伸：
// webpack.rules.conf.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = [
  {
test: /\.scss$/i,
use: [
   Object.assign(
      // 生产环境压缩 css 需要使用 MiniCssExtractPlugin.loader 代替 style-loader
      { loader: process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader' },
      // 解决编译后 css 图片不能正常显示的问题
      process.env.NODE_ENV === 'production' ? { options: { publicPath: '../' } } : {}
   ),
   'css-loader',
   'sass-loader',
   'postcss-loader'
]
  }
]

在生产环境，我们需要对 css 文件进行压缩，所以还需要在 webpack.prod.conf.js 中这样去优化一下：
// webpack.prod.conf.js

cconst merge = require('webpack-merge')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const baseConfig = require('./webpack.base.conf.js')

const prodConfig = {
  optimization: {
minimizer: [
   new OptimizeCSSAssetsPlugin({})
],
  },
  plugins: [
new MiniCssExtractPlugin({
   filename: 'css/[name].[contenthash:8].css',
   chunkFileName: '[id].[contenthash:8].css'
}),
  ]
}

module.exports = merge(baseConfig, prodConfig)

images
images 方面，我们一般有以下需求：

css 和 js 中的图片可以被解析；
html 中 img 标签的图片可以被解析。

针对以上需求，我们来配置一下子 rules，并且做一下延伸：
// webpack.rules.conf.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = [
  {
test: /\.html$/,
use: [
   // 如果 img 标签的 src 为空的话，就报错 xxxHTMLLINKxxx0.
   {
      loader: 'html-loader',
   }
]
  },
  {
test: /\.(png|jpg|gif|ico)$/,
use: [
   {
      loader: 'url-loader',
      options: {
      name: '[name].[hash:8].[ext]',
      limit: 30000,
      outputPath: './images'
      }
   }
]
  }
]

其他
devserver 和热更新
// webpack.dev.conf.js

const devConfig = {
  devServer: {
open: true,
host: '0.0.0.0',
port: 2000,
useLocalIp: true,
hot: true
  },
  plugins: [
new webpack.HotModuleReplacementPlugin()
  ]
}

这样智能启动 css 热更新，如果需要 js 热更新，需要添加一段代码，请自行查找官网文档。

推荐了解热门学科

java培训	Python人工智能	Web前端培训	PHP培训
区块链培训	影视制作培训	C++培训	产品经理培训
UI设计培训	新媒体培训	产品经理培训	Linux运维
大数据培训	智能机器人软件开发

传智播客是一家致力于培养高素质软件开发人才的科技公司，“黑马程序员”是传智播客旗下高端IT教育品牌。自“黑马程序员”成立以来，教学研发团队一直致力于打造精品课程资源，不断在产、学、研3个层面创新自己的执教理念与教学方针，并集中“黑马程序员”的优势力量，针对性地出版了计算机系列教材50多册，制作教学视频数+套，发表各类技术文章数百篇。

传智播客从未停止思考

传智播客副总裁毕向东在2019IT培训行业变革大会提到，“传智播客意识到企业的用人需求已经从初级程序员升级到中高级程序员，具备多领域、多行业项目经验的人才成为企业用人的首选。”

中级程序员和初级程序员的差别在哪里?
项目经验。毕向东表示，“中级程序员和初级程序员最大的差别在于中级程序员比初级程序员多了三四年的工作经验，从而多出了更多的项目经验。“为此，传智播客研究院引进曾在知名IT企业如阿里、IBM就职的高级技术专家，集中研发面向中高级程序员的课程，用以满足企业用人需求，尽快补全IT行业所需的人才缺口。

何为中高级程序员课程?

传智播客进行了定义。中高级程序员课程，是在当前主流的初级程序员课程的基础上，增加多领域多行业的含金量项目，从技术的广度和深度上进行拓展。“我们希望用5年的时间，打造上百个高含金量的项目，覆盖主流的32个行业。”传智播客课程研发总监于洋表示。

黑马程序员热门视频教程【点击播放】

Python入门教程完整版（懂中文就能学会）	零起点打开Java世界的大门
C++\| 匠心之作从0到1入门学编程	PHP\|零基础入门开发者编程核心技术
Web前端入门教程_Web前端html+css+JavaScript	软件测试入门到精通

全国中心

[南京校区]webpack 配置多页面应用【黑马web前端】

相关阅读