资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/➹使用webpack配置多页面应用(MPA)

➹使用webpack配置多页面应用(MPA)

rainyang / 2574人阅读

使用webpack配置MPA

为什么需要使用 webpack 构建多页应用呢？因为某些项目使用 SPA 不太合适（大多是 SEO 的原因），或者您在做项目时有其他的需求。
如果你有如下需求：

使用 ES6 进行开发

期望使用面向对象开发（class）

自动压缩合并 CSS 和 JS 文件

使用 ESLint 进行代码检查

自动生成 HTML 文件

自动抽取 CSS 文件 ...

有了这些需求，基本上就必须使用 webpack 了。

安装依赖

首先是项目中需要使用的依赖安装。

安装 webpack 和 webpack-dev-server

</>复制代码 
  1. npm install webpack webpack-dev-server --save-dev

安装 webpack-merge

</>复制代码 
  1. npm install webpack-merge --save-dev

该插件用来对 webpack 配置进行合并操作。

安装 babel 相关插件

</>复制代码 
  1. npm install babel-core babel-loader babel-preset-env --save-dev

这系列插件用来对 ES6 语法进行转换。

安装样式处理相关插件

</>复制代码 
  1. npm install css-loader style-loader postcss-loader autoprefixer --save-dev

这系列插件用来处理 CSS 样式，其中 autoprefixer 是 postcss 的一个插件，用来自动给 CSS 样式添加前缀。

安装 file-loader

该插件将在导入图片、字体等文件时发挥作用。PS.您也可以安装 url-loader 以实现相同的作用：

</>复制代码 
  1. npm install file-loader --save-dev
  2. npm install url-loader --save-dev

安装 ESLint 相关的插件

</>复制代码 
  1. npm install eslint eslint-loader --save-dev

这些插件用来对 JavaScript 代码进行检查。

安装 html-webpack-plugin 插件

</>复制代码 
  1. npm install html-webpack-plugin --save-dev

该插件用来自动生成 HTML 文件。

安装 extract-text-webpack-plugin 插件

</>复制代码 
  1. npm install extract-text-webpack-plugin --save-dev

该插件用来将 CSS 抽取到独立的文件。

安装 clean-webpack-plugin 插件

</>复制代码 
  1. npm install clean-webpack-plugin --save-dev

该插件用来对 dist 文件夹进行清理工作，每次打包时先清理之前的 dist 文件夹。

下面是这些安装了的所有依赖： 
</>复制代码 
  1. ...
  2.   "devDependencies": {
  3.     "autoprefixer": "^7.1.3",
  4.     "babel-core": "^6.26.0",
  5.     "babel-loader": "^7.1.2",
  6.     "babel-preset-env": "^1.6.0",
  7.     "clean-webpack-plugin": "^0.1.16",
  8.     "css-loader": "^0.28.7",
  9.     "eslint": "^4.6.1",
  10.     "eslint-loader": "^1.9.0",
  11.     "extract-text-webpack-plugin": "^3.0.0",
  12.     "file-loader": "^0.11.2",
  13.     "html-webpack-plugin": "^2.30.1",
  14.     "postcss-loader": "^2.0.6",
  15.     "style-loader": "^0.18.2",
  16.     "url-loader": "^0.5.9",
  17.     "webpack": "^3.5.5",
  18.     "webpack-dev-server": "^2.7.1",
  19.     "webpack-merge": "^4.1.0"
  20.   },
  21. ...
配置文件划分

使用 webpack 进行项目构建时，我们有不同的目的，因此最好将配置文件进行拆分，以适应不同的工作：

</>复制代码 
  1. ├─config
  2. │      config.js
  3. │      webpack.config.base.js
  4. │      webpack.config.dev.js
  5. │      webpack.config.lint.js
  6. │      webpack.config.prod.js
  7. │  webpack.config.js
下面是一些配置的说明： 
</>复制代码 
  1. config.js：一些全局的配置，比如 HTML 文件的路径、publicPath 等
  2. webpack.config.base.js：最基础的配置文件
  3. webpack.config.dev.js：开发环境配置文件
  4. webpack.config.lint.js：使用 ESLint 代码检查时的配置文件
  5. webpack.config.prod.js：生产环境配置文件
  6. webpack.config.js：主配置文件，根据环境变量引用相应的环境的配置

这些配置文件之间是通过 webpack-merge 这个插件进行合并的。

配置多页应用的关键点

如何使用 webpack 配置多页面应用呢？实现多页面应用的关键点在哪里呢？首先需要简单看一下多页应用和单页应用功能的区别。

单页应用的特点：

只有一个入口页面（index.html）
这个单页页面（index.html）中需要引入打包后的所有 JavaScript 文件
所有的页面内容完全由 JavaScript 生成
单页应用有自己的路由系统，服务器端没有和路由对应的文件
···

多页应用的特点：

每个版块对应一个页面
每个页面需要对公共的 JavaScript 进行引入
每个页面还需要引入和其自身对应的 JavaScript 文件
由于对应了多个页面，因此不是所有页面内容都是由 JavaScript 生成的
没有自己的路由系统，服务器端有对应的静态文件
···
抛开生成页面内容和路由系统，我们可以看到单页应用和多页应用最大的区别就是：

单页应用需要在入口页面引入所有的 JavaScript 文件
多页应用需要在每个页面中引入公共的 JavaScript 文件以及其自身的 JavaScript 文件
由于 CSS 文件是可以由 extract-text-webpack-plugin 这个插件自动提取并插入到 HTML 页面的，因此我们只需要关心如何在 HTML 页面中引入 JavaScript 文件了。
webpack 在打包时，会将入口文件中的 JavaScript 文件打包到某个目标文件中，在不考虑代码分割提取的情况下，一个入口文件会打包为一个目标文件，多个入口文件会打包为多个对应的目标文件。
因此，我们可以将每个多页页面中的特有的 JavaScript 文件作为入口文件，在打包时将对应打包成不同的 bundle 文件（结果文件），如果你想要的话，还可以在打包时进行代码分割处理，将公用代码抽取成一个文件，然后在 HTML 中引入这些 JavaScript 文件就好了。
总结一下，使用 webpack 配置多页应用的关键点在于：

将每个页面中特有的 JavaScript 文件作为入口文件进行打包
在打包后，每个页面中都需要引入这些打包后的文件
您可以在打包时进行公用代码提取，然后在 HTML 文件中引入
说了这么多，其实就是利用了 webpack 多入口文件进行打包。

自动生成 HTML 页面

在使用 webpack 对 JavaScript 文件进行打包时，通常需要在打包的文件名中加一个 hash 字符串用来防止缓存，当我们修改了 JavaScript 代码后，打包后的文件名也会发生变化。此时如果手动在 HTML 中引用这些 JavaScript 文件，是非常麻烦的。
因此，我们期望能自动生成 HTML 文件，并自动引用打包后的 JavaScript 文件。所谓自动生成 HTML 文件，可以理解为将源代码的 HTML 复制到目标文件夹中，同时自动引用打包后的 JavaScript 文件。
要完成这项操作，就需要使用前面安装的 html-webpack-plugin 这个插件。

html-webpack-plugin 插件的使用

首先，在我的项目中，有这么一些 HTML 页面，将它们放在 html 文件夹中：

</>复制代码 
  1. Mode                LastWriteTime         Length Name
  2. ----                -------------         ------ ----
  3. -a----         2017/9/5     18:04           1071 company_intro.html
  4. -a----         2017/9/5     18:04            988 contact_us.html
  5. -a----         2017/9/5     18:04           1131 cooperate.html
  6. -a----         2017/9/5     18:04           1244 enterprise_culture.html
  7. -a----         2017/9/5     18:04           1011 hornors.html
  8. -a----         2017/9/5     18:04           1365 index.html
  9. -a----         2017/9/5     18:04           1769 investment.html
  10. -a----         2017/9/5     18:04           1005 join_us.html
  11. -a----         2017/9/5     18:04           1037 news_center.html
  12. -a----         2017/9/5     18:04            987 news_item.html
  13. -a----         2017/9/5     18:04           1134 operate.html
  14. -a----         2017/9/5     18:04           1255 product.html
  15. -a----         2017/9/5     18:04           1132 schools.html

然后，把这些 HTML 文件名（不要后缀）都写在 config.js 文件中，以供取用：

</>复制代码 
  1. module.exports = {
  2.     HTMLDirs:[
  3.         "index",
  4.             "company_intro",
  5.             "enterprise_culture",
  6.             "hornors",
  7.             "news_center",
  8.             "news_item",
  9.             "product",
  10.             "schools",
  11.             "operate",
  12.             "cooperate",
  13.             "join_us",
  14.             "contact_us",
  15.             "investment"
  16.             ],
  17.         }

HTMLDirs 是一个数组，其中保存了项目中会用到的所有 HTML 页面。
接下来，每个 HTML 页面都对应一份 JavaScript 代码，因此在 js 文件夹中建立对应的 JavaScript 文件：

</>复制代码 
  1. Mode                LastWriteTime         Length Name
  2. ----                -------------         ------ ----
  3. -a----         2017/9/5     18:04           2686 company_intro.js
  4. -a----         2017/9/5     18:04            594 contact_us.js
  5. -a----         2017/9/5     18:04           1725 cooperate.js
  6. -a----         2017/9/8     16:54           3505 enterprise_culture.js
  7. -a----         2017/9/5     18:04           2208 hornors.js
  8. -a----         2017/9/8     16:54           4491 index.js
  9. -a----         2017/9/5     18:04           3180 investment.js
  10. -a----         2017/9/5     18:04           1327 join_us.js
  11. -a----         2017/9/8     16:55           3689 news_center.js
  12. -a----         2017/9/5     18:04           1972 news_item.js
  13. -a----         2017/9/5     18:04           2728 operate.js
  14. -a----         2017/9/5     18:04           2664 product.js
  15. -a----         2017/9/5     18:04           2476 schools.js

这两项是必须的，只有提供了每个页面的 HTML 文件和对应的 JavaScript 文件，才能构建多页面应用。
同时，可能每个页面都有自己的样式，因此您也可以在 css 文件夹中建立一些样式文件：

</>复制代码 
  1. Mode                LastWriteTime         Length Name
  2. ----                -------------         ------ ----
  3. -a----         2017/9/5     18:04            419 company_intro.css
  4. -a----         2017/9/5     18:04            167 contact_us.css
  5. -a----         2017/9/5     18:04            214 cooperate.css
  6. -a----         2017/9/5     18:04            926 enterprise_culture.css
  7. -a----         2017/9/5     18:04            255 hornors.css
  8. -a----         2017/9/5     18:04            693 investment.css
  9. -a----         2017/9/5     18:04            136 join_us.css
  10. -a----         2017/9/5     18:04            541 news_center.css
  11. -a----         2017/9/5     18:04            623 news_item.css
  12. -a----         2017/9/5     18:04            342 operate.css
  13. -a----         2017/9/5     18:04            236 product.css
  14. -a----         2017/9/5     18:04            213 schools.css

关于建立样式这一项，不是必须的。
最后，我们就可以使用 html-webpack-plugin 这个插件来自动生成 HTML 文件了，html-webpack-plugin 插件的用法如下：

</>复制代码 
  1. // 引入插件
  2. const HTMLWebpackPlugin = require("html-webpack-plugin");
  3. // 引入多页面文件列表
  4. const { HTMLDirs } = require("./config");
  5. // 通过 html-webpack-plugin 生成的 HTML 集合
  6. let HTMLPlugins = [];
  7. // 入口文件集合
  8. let Entries = {}
  9. // 生成多页面的集合
  10. HTMLDirs.forEach((page) => {
  11.     const htmlPlugin = new HTMLWebpackPlugin({
  12.         filename: `${page}.html`,
  13.         template: path.resolve(__dirname, `../app/html/${page}.html`),
  14.         chunks: [page, "commons"],
  15.     });
  16.     HTMLPlugins.push(htmlPlugin);
  17.     Entries[page] = path.resolve(__dirname, `../app/js/${page}.js`);
  18. })

在上面的代码中，首先引入了所需的插件和变量，然后利用 html-webpack-plugin 循环生成 HTML 页面。
简单说下 HTMLWebpackPlugin 构造函数的几个参数：

filename：生成的 HTML 文件名，我这里选择和原始文件名保持一致
template：生成 HTML 文件使用的模板，也就是我们之前在 html 文件夹中建立的那些文件
chunks：生成 HTML 文件时会自动插入相应的代码片段（也就是 JavaScript 文件），我这里选择插入每个页面对应的 JavaScript 文件，以及最后提取出来的公共文件代码块。
关于 chunks 还需要说明一点，chunks 是一个数组，在生成 HTML 文件时会将数组中的对应的 JavaScript 片段自动插入到 HTML 中，这些片段也就是 webpack 打包时的 output 选项中的 [name]。这里只需要写上 [name] 值就行了，无需使用打包生成的完整名称，因为这会还没开始打包呢，打包后生成的名称咱也不知道。
最后，我们把这些生成 HTML 文件的配置插入到 HTMLPlugins 这个数组中，同时设置 webpack 的入口文件。

目录划分

在这个脚手架中，我是这样划分项目结构的：

</>复制代码 
  1.     ├─app
  2.     │  ├─css
  3.     │  ├─html
  4.     │  ├─img
  5.     │  ├─js
  6.     │  └─lib
  7.     ├─config
  8.     └─dist
  9.         ├─css
  10.         ├─img
  11.         └─js
  12.     其中 app 是项目的源码，config 是 webpack 相关的一些配置文件，dist 是存放打包后的文件，是由 webpack 自动生成的。
  13.     更详细的文件结构如下：
  14.     │  .babelrc
  15.     │  .eslintrc.js
  16.     │  .gitignore
  17.     │  package.json
  18.     │  postcss.config.js
  19.     │  webpack.config.js
  20.     │  
  21.     ├─app
  22.     │  │  favicon.ico
  23.     │  │  
  24.     │  ├─css
  25.     │  │      main.css
  26.     │  │      
  27.     │  ├─html
  28.     │  │      index.html
  29.     │  │    
  30.     │  │      
  31.     │  ├─img
  32.     │  │      back.png
  33.     │  │      
  34.     │  ├─js
  35.     │  │      ajax.js
  36.     │  │      footer.js
  37.     │  │      index.js
  38.     │  │      nav.js
  39.     │  │      public.js
  40.     │  │      tity_nav.js
  41.     │  │      
  42.     │  └─lib
  43.     │        flexible.js
  44.     │        normalize.css
  45.     │        swiper.css
  46.     │        swiper.js
  47.     │        
  48.     └─config
  49.             config.js
  50.             webpack.config.base.js
  51.             webpack.config.dev.js
  52.             webpack.config.lint.js
  53.             webpack.config.prod.js
package.json

所有的功能都是从 package.json 的 scripts 入口开始执行的，我想要脚手架有以下功能：

开发环境构建

生产环境构建

ESLint 代码检查环境

生产环境构建后的服务器预览环境

在开发或代码检查环境，需要启用 webpack-dev-server 命令，生产环境构建需要启用 webpack 命令，预览环境需要启用 http-server 环境。

上文介绍时把 http-server 给落下了，您现在可以进行如下安装：

</>复制代码 
  1. npm install http-server --save-dev

scripts 命令行配置如下：

</>复制代码 
  1.   "scripts": {
  2.     "dev": "set NODE_ENV=dev && webpack-dev-server --open",
  3.     "build": "set NODE_ENV=prod && webpack -p",
  4.     "lint": "set NODE_ENV=lint && webpack-dev-server --open",
  5.     "serve": "http-server ./dist -p 8888 -o",
  6.     "serve2": "http-server ./dist -p 8888"
  7.   },

下面是整个 package.json 文件：

</>复制代码 
  1. {
  2.     "name": "xxx",
  3.     "version": "1.0.0",
  4.     "description": "",
  5.     "main": "index.js",
  6.     "scripts": {
  7.     "dev": "set NODE_ENV=dev && webpack-dev-server --open",
  8.     "build": "set NODE_ENV=prod && webpack -p",
  9.     "lint": "set NODE_ENV=lint && webpack-dev-server --open",
  10.     "serve": "http-server ./dist -p 8888 -o",
  11.     "serve2": "http-server ./dist -p 8888"
  12.     },
  13.     "author": "",
  14.     "license": "ISC",
  15.     "devDependencies": {
  16.     "autoprefixer": "^7.1.3",
  17.     "babel-core": "^6.26.0",
  18.     "babel-loader": "^7.1.2",
  19.     "babel-plugin-transform-es2015-spread": "^6.22.0",
  20.     "babel-preset-env": "^1.6.0",
  21.     "clean-webpack-plugin": "^0.1.16",
  22.     "css-loader": "^0.28.7",
  23.     "eslint": "^4.5.0",
  24.     "eslint-loader": "^1.9.0",
  25.     "extract-text-webpack-plugin": "^3.0.0",
  26.     "file-loader": "^0.11.2",
  27.     "html-webpack-plugin": "^2.30.1",
  28.     "http-server": "^0.10.0",
  29.     "postcss-loader": "^2.0.6",
  30.     "style-loader": "^0.18.2",
  31.     "url-loader": "^0.5.9",
  32.     "webpack": "^3.5.5",
  33.     "webpack-dev-server": "^2.7.1",
  34.     "webpack-merge": "^4.1.0"
  35.     },
  36.     "dependencies": {}
  37. }
启用环境

如果您想启用某个环境，需要使用 npm run xxx 命令：

npm run dev：进入开发环境

npm run build：进入生产环境

npm run lint：执行代码检查

npm run serve：服务器环境下预览（打开浏览器）

npm run serve2：服务器环境下预览（不打开浏览器）

默认情况下，使用这些命令都会先引入和 package.js 同目录下的 webpack.config.js 文件。由于我们不会将所有的配置都放在 webpack.config.js 中，而是过环境变量进行区分，在 webpack.config.js 中引用其他的配置文件。
设置环境变量采用的语法：

set NODE_ENV=xxx
这里我们为开发、生产、代码检查和预览这几个环境设置了环境变量。

webpack.config.js

webpack.config.js 文件比较简单，只有两行代码，其作用就是用来引用其他的配置文件：

</>复制代码 
  1. // 获取环境命令，并去除首尾空格
  2. const env = process.env.NODE_ENV.replace(/(s*$)|(^s*)/ig,"");
  3. // 根据环境变量引用相关的配置文件
  4. module.exports = require(`./config/webpack.config.${env}.js`)
  5. webpack.config.base.js

webpack.config.base.js 是最基础的配置文件，包含了这些环境都可能使用到的配置。

1）相关插件引入 
</>复制代码 
  1. const path = require("path");
  2. // 引入插件
  3. const HTMLWebpackPlugin = require("html-webpack-plugin");
  4. // 清理 dist 文件夹
  5. const CleanWebpackPlugin = require("clean-webpack-plugin")
  6. // 抽取 css
  7. const ExtractTextPlugin = require("extract-text-webpack-plugin");
  8. #### 2）自动生成 HTML 的配置
  9. // 引入多页面文件列表
  10. const config = require("./config");
  11. // 通过 html-webpack-plugin 生成的 HTML 集合
  12. let HTMLPlugins = [];
  13. // 入口文件集合
  14. let Entries = {}
  15. // 生成多页面的集合
  16. config.HTMLDirs.forEach((page) => {
  17.     const htmlPlugin = new HTMLWebpackPlugin({
  18.         filename: `${page}.html`,
  19.         template: path.resolve(__dirname, `../app/html/${page}.html`),
  20.         chunks: [page, "commons"],
  21.     });
  22.     HTMLPlugins.push(htmlPlugin);
  23.     Entries[page] = path.resolve(__dirname, `../app/js/${page}.js`);
  24. })
3）主配置文件一览 
</>复制代码 
  1. module.exports = {
  2.     // 入口文件
  3.     entry:Entries,
  4.     // 启用 sourceMap
  5.     devtool:"cheap-module-source-map",
  6.     // 输出文件
  7.     output:{},
  8.     // 加载器
  9.     module:{
  10.         rules:[
  11.         ],
  12.     },
  13.     // 插件
  14.     plugins:[],
  15. }
4）配置 css 加载器 
</>复制代码 
  1. {
  2.     // 对 css 后缀名进行处理
  3.     test:/.css$/,
  4.     // 不处理 node_modules 文件中的 css 文件
  5.     exclude: /node_modules/,
  6.     // 抽取 css 文件到多带带的文件夹
  7.     use: ExtractTextPlugin.extract({
  8.         fallback: "style-loader",
  9.         // 设置 css 的 publicPath
  10.         publicPath: config.cssPublicPath,
  11.         use: [{
  12.                 loader:"css-loader",
  13.                 options:{
  14.                     // 开启 css 压缩
  15.                     minimize:true,
  16.                 }
  17.             },
  18.             {
  19.                 loader:"postcss-loader",
  20.             }
  21.         ]
  22.     })
  23. },

这里有两点需要说明：
A.publicPath：在 css 中设置背景图像的 url 时，经常会找不到图片（默认会在 css 文件所在的文件夹中寻找），这里设置 extract-text-webpack-plugin 插件的 publicPath 为图片文件夹所在的目录，就可以顺利找到图片了。
在 config.js 中，设置 cssPublicPath 的值：

cssPublicPath:"../"
B.postcss 我主要用来自动添加 css 前缀以及一点美化操作，在使用 postcss 时，需要在 postcss.config.js 中进行配置：

</>复制代码 
  1. module.exports = {  
  2.     plugins: {  
  3.     "autoprefixer": {
  4.         browsers: ["last 5 version","Android >= 4.0"],
  5.         //是否美化属性值 默认：true 
  6.         cascade: true,
  7.         //是否去掉不必要的前缀 默认：true 
  8.         remove: true
  9.     }  
  10.     }  
  11. }
5）配置 js 加载器

js 加载器的配置如下：

</>复制代码 
  1. {
  2.     test: /.js$/,
  3.     exclude: /node_modules/,
  4.     use: {
  5.         loader: "babel-loader",
  6.         options: {
  7.             presets: ["env"]
  8.         }
  9.     }
  10. },
6）配置图片加载器

图片加载器的配置如下：

</>复制代码 
  1. {
  2.     test: /.(png|svg|jpg|gif)$/,
  3.     use:{
  4.         loader:"file-loader",
  5.         options:{
  6.             // 打包生成图片的名字
  7.             name:"[name].[ext]",
  8.             // 图片的生成路径
  9.             outputPath:config.imgOutputPath
  10.         }
  11.     }
  12. },

outputPath 规定了输出图片的位置，默认情况下，图片在打包时会和所有的 HTML/CSS/JS 文件打包到一起，通过设置 outputPath 值可以将所有的图片都打包到一个多带带的文件中。
设置 config.js 的 imgOutputPath：

imgOutputPath:"img/",
在打包时，会将所有的图片打包到 dist 文件夹下的 img 文件夹中。

7）配置自定义字体加载器

自定义字体加载器的配置如下：

</>复制代码 
  1. {
  2.     test: /.(woff|woff2|eot|ttf|otf)$/,
  3.     use:["file-loader"]
  4. }
8）插件配置

插件配置如下：

</>复制代码 
  1. plugins:[
  2.     // 自动清理 dist 文件夹
  3.     new CleanWebpackPlugin(["dist"]),
  4.     // 将 css 抽取到某个文件夹
  5.     new ExtractTextPlugin(config.cssOutputPath),        
  6.     // 自动生成 HTML 插件
  7.     ...HTMLPlugins
  8. ],

同打包图片，在抽取 css 时也可以指定抽取的目录，只需将路径传入 extract-text-webpack-plugin 插件的构造函数中。
配置 config.js 的 cssOutputPath 选项：

</>复制代码 
  1. cssOutputPath:"./css/styles.css",

这里将所有的 css 提取到 dist 文件夹下的 css 文件夹中，并命名为 style.css。

webpack.config.base.js 详细配置

下面是 webpack.config.base.js 的详细配置文件：

</>复制代码 
  1. const path = require("path");
  2. // 引入插件
  3. const HTMLWebpackPlugin = require("html-webpack-plugin");
  4. // 清理 dist 文件夹
  5. const CleanWebpackPlugin = require("clean-webpack-plugin")
  6. // 抽取 css
  7. const ExtractTextPlugin = require("extract-text-webpack-plugin");
  8. // 引入多页面文件列表
  9. const config = require("./config");
  10. // 通过 html-webpack-plugin 生成的 HTML 集合
  11. let HTMLPlugins = [];
  12. // 入口文件集合
  13. let Entries = {}
  14. // 生成多页面的集合
  15. config.HTMLDirs.forEach((page) => {
  16.     const htmlPlugin = new HTMLWebpackPlugin({
  17.         filename: `${page}.html`,
  18.         template: path.resolve(__dirname, `../app/html/${page}.html`),
  19.         chunks: [page, "commons"],
  20.     });
  21.     HTMLPlugins.push(htmlPlugin);
  22.     Entries[page] = path.resolve(__dirname, `../app/js/${page}.js`);
  23. })
  24. module.exports = {
  25.     entry:Entries,
  26.     devtool:"cheap-module-source-map",
  27.     output:{
  28.         filename:"js/[name].bundle.[hash].js",
  29.         path:path.resolve(__dirname,"../dist")
  30.     },
  31.     // 加载器
  32.     module:{
  33.         rules:[
  34.             {
  35.                 // 对 css 后缀名进行处理
  36.                 test:/.css$/,
  37.                 // 不处理 node_modules 文件中的 css 文件
  38.                 exclude: /node_modules/,
  39.                 // 抽取 css 文件到多带带的文件夹
  40.                 use: ExtractTextPlugin.extract({
  41.                     fallback: "style-loader",
  42.                     // 设置 css 的 publicPath
  43.                     publicPath: config.cssPublicPath,
  44.                     use: [{
  45.                             loader:"css-loader",
  46.                             options:{
  47.                                 // 开启 css 压缩
  48.                                 minimize:true,
  49.                             }
  50.                         },
  51.                         {
  52.                             loader:"postcss-loader",
  53.                         }
  54.                     ]
  55.                 })
  56.             },
  57.             {
  58.                 test: /.js$/,
  59.                 exclude: /node_modules/,
  60.                 use: {
  61.                     loader: "babel-loader",
  62.                     options: {
  63.                         presets: ["env"]
  64.                     }
  65.                 }
  66.             },
  67.             {
  68.                 test: /.(png|svg|jpg|gif)$/,
  69.                 use:{
  70.                     loader:"file-loader",
  71.                     options:{
  72.                         // 打包生成图片的名字
  73.                         name:"[name].[ext]",
  74.                         // 图片的生成路径
  75.                         outputPath:config.imgOutputPath
  76.                     }
  77.                 }
  78.             },
  79.             {
  80.                 test: /.(woff|woff2|eot|ttf|otf)$/,
  81.                 use:["file-loader"]
  82.             }
  83.         ],
  84.     },
  85.     plugins:[
  86.         // 自动清理 dist 文件夹
  87.         new CleanWebpackPlugin(["dist"]),
  88.         // 将 css 抽取到某个文件夹
  89.         new ExtractTextPlugin(config.cssOutputPath),        
  90.         // 自动生成 HTML 插件
  91.         ...HTMLPlugins
  92.     ],
  93. }
webpack.config.dev.js

这个配置文件主要用来在开发环境使用，需要 webpack-dev-server 这个插件提供支持。该文件的配置如下：

</>复制代码 
  1. // 引入基础配置文件
  2. const webpackBase = require("./webpack.config.base");
  3. // 引入 webpack-merge 插件
  4. const webpackMerge = require("webpack-merge");
  5. // 引入配置文件
  6. const config = require("./config");
  7. // 合并配置文件
  8. module.exports = webpackMerge(webpackBase,{
  9.     // 配置 webpack-dev-server
  10.     devServer:{
  11.         // 项目根目录
  12.         contentBase:config.devServerOutputPath,
  13.         // 错误、警告展示设置
  14.         overlay:{
  15.             errors:true,
  16.             warnings:true
  17.         }
  18.     }
  19. });

其中，webpack-merge 这个插件用来对配置文件进行合并，在 webpack.config.base.js 的基础上合并新的配置。
devServer 配置项的 contentBase 项是项目的根目录，也就是我们的 dist 目录，区别在于这个 dist 目录不是硬盘上的 dist 目录，而是存在于内存中的 dist 目录。在使用 webpack-dev-server 时，将会以这个内存中的 dist 目录作为根目录。
devServer 的 overlay 选项中设置了展示错误和警告，这样当代码发生错误时，会将错误信息投射到浏览器上，方便我们开发。
这里将 contentBase 指向了 config 中的一个配置：

</>复制代码 
  1. devServerOutputPath:"../dist",
  2. webpack.config.prod.js

该配置文件用来在生产环境启用，主要用来压缩、合并和抽取 JavaScript 代码，并将项目文件打包至硬盘上的 dist 文件夹中。

</>复制代码 
  1. // 引入基础配置
  2. const webpackBase = require("./webpack.config.base");
  3. // 引入 webpack-merge 插件
  4. const webpackMerge = require("webpack-merge");
  5. // 引入 webpack
  6. const webpack = require("webpack");
  7. // 合并配置文件
  8. module.exports = webpackMerge(webpackBase,{
  9.     plugins:[
  10.         // 代码压缩
  11.         new webpack.optimize.UglifyJsPlugin({
  12.             // 开启 sourceMap
  13.             sourceMap: true
  14.         }),
  15.         // 提取公共 JavaScript 代码
  16.         new webpack.optimize.CommonsChunkPlugin({
  17.             // chunk 名为 commons
  18.             name: "commons",
  19.             filename: "[name].bundle.js",
  20.         }),
  21.     ]
  22. });

在抽取公共的 JavaScript 代码时，我们将公共代码抽取为 commons.bundle.js，这个公共代码的 chunk（name）名就是 commons，在使用 html-webpack-plugin 自动生成 HTML 文件时会引用这个 chunk。

</>复制代码 
  1. webpack.config.lint.js

这项配置用来进行代码检查，配置如下：

</>复制代码 
  1. const webpackBase = require("./webpack.config.base");
  2. const webpackMerge = require("webpack-merge");
  3. const config = require("./config");
  4. module.exports = webpackMerge(webpackBase,{
  5.     module:{
  6.         rules:[
  7.             {
  8.                 test: /.js$/,
  9.                 // 强制先进行 ESLint 检查
  10.                 enforce: "pre",
  11.                 // 不对 node_modules 和 lib 文件夹中的代码进行检查
  12.                 exclude: /node_modules|lib/,
  13.                 loader: "eslint-loader",
  14.                 options: {
  15.                     // 启用自动修复
  16.                     fix:true,
  17.                     // 启用警告信息
  18.                     emitWarning:true,
  19.                 }
  20.             },
  21.         ]
  22.     },
  23.     devServer:{
  24.         contentBase:config.devServerOutputPath,
  25.         overlay:{
  26.             errors:true,
  27.             warnings:true
  28.         }
  29.     }
  30. });

在使用 eslint-loader 时，我们设置了 enforce:"pre" 选项，这个选项表示在处理 JavaScript 之前先启用 ESLint 代码检查，然后再使用 babel 等 loader 对 JavaScript 进行编译。
在 eslint-loader 的 options 选项中，设置了自动修复和启用警告信息，这样当我们的代码出现问题时，ESLint 会首先尝试自动修复（如将双引号改为单引号），对于无法自动修复的问题，将以警告或错误的信息进行展示。

配置 .eslintrc.js

要想使用 ESLint 进行代码检查，除了使用 eslint-loader 之外，还需针对 ESLint 本身进行配置，这就需要一个 .eslintrc.js 文件。该文件的配置如下：

</>复制代码 
  1. module.exports = {
  2.     env: {
  3.     browser: true,
  4.     commonjs: true,
  5.     es6: true,
  6.     node: true,
  7.     },
  8.     extends: "eslint:recommended",
  9.     parserOptions: {
  10.     sourceType: "module",
  11.     },
  12.     rules: {
  13.     "comma-dangle": ["error", "always-multiline"],
  14.     indent: ["error", 2],
  15.     "linebreak-style": ["error", "unix"],
  16.     quotes: ["error", "single"],
  17.     semi: ["error", "always"],
  18.     "no-unused-vars": ["warn"],
  19.     "no-console": 0,
  20.     },
  21. };
package.json 
</>复制代码 
  1. {
  2.     "name": "xxx",
  3.     "version": "1.0.0",
  4.     "description": "",
  5.     "main": "index.js",
  6.     "scripts": {
  7.     "dev": "set NODE_ENV=dev && webpack-dev-server --open",
  8.     "build": "set NODE_ENV=prod && webpack -p",
  9.     "lint": "set NODE_ENV=lint && webpack-dev-server --open",
  10.     "serve": "http-server ./dist -p 8888 -o",
  11.     "serve2": "http-server ./dist -p 8888"
  12.     },
  13.     "author": "",
  14.     "license": "ISC",
  15.     "devDependencies": {
  16.     "autoprefixer": "^7.1.3",
  17.     "babel-core": "^6.26.0",
  18.     "babel-loader": "^7.1.2",
  19.     "babel-plugin-transform-es2015-spread": "^6.22.0",
  20.     "babel-preset-env": "^1.6.0",
  21.     "clean-webpack-plugin": "^0.1.16",
  22.     "css-loader": "^0.28.7",
  23.     "eslint": "^4.5.0",
  24.     "eslint-loader": "^1.9.0",
  25.     "extract-text-webpack-plugin": "^3.0.0",
  26.     "file-loader": "^0.11.2",
  27.     "html-webpack-plugin": "^2.30.1",
  28.     "http-server": "^0.10.0",
  29.     "postcss-loader": "^2.0.6",
  30.     "style-loader": "^0.18.2",
  31.     "url-loader": "^0.5.9",
  32.     "webpack": "^3.5.5",
  33.     "webpack-dev-server": "^2.7.1",
  34.     "webpack-merge": "^4.1.0"
  35.     },
  36.     "dependencies": {}
  37. }
.gitignore 
</>复制代码 
  1. node_modules
  2. dist
  3. npm-debug.log
  4. .babelrc
  5. {
  6.     "plugins": ["transform-es2015-spread"]
  7. }
.eslintrc.js 
</>复制代码 
  1. module.exports = {
  2.     env: {
  3.     browser: true,
  4.     commonjs: true,
  5.     es6: true,
  6.     node: true,
  7.     },
  8.     extends: "eslint:recommended",
  9.     parserOptions: {
  10.     sourceType: "module",
  11.     },
  12.     rules: {
  13.     "comma-dangle": ["error", "always-multiline"],
  14.     indent: ["error", 2],
  15.     "linebreak-style": ["error", "unix"],
  16.     quotes: ["error", "single"],
  17.     semi: ["error", "always"],
  18.     "no-unused-vars": ["warn"],
  19.     "no-console": 0,
  20.     },
  21. };
postcss.config.js 
</>复制代码 
  1. module.exports = {  
  2.     plugins: {  
  3.     "autoprefixer": {
  4.         browsers: ["last 5 version","Android >= 4.0"],
  5.         //是否美化属性值 默认：true 
  6.         cascade: true,
  7.         //是否去掉不必要的前缀 默认：true 
  8.         remove: true
  9.     }  
  10.     }  
  11. }
config.js 
</>复制代码 
  1. module.exports = {
  2.     HTMLDirs:[
  3.         "index",
  4.         "company_intro",
  5.         "enterprise_culture",
  6.         "hornors",
  7.         "news_center",
  8.         "news_item",
  9.         "product",
  10.         "schools",
  11.         "operate",
  12.         "cooperate",
  13.         "join_us",
  14.         "contact_us",
  15.         "investment"
  16.     ],
  17.     cssPublicPath:"../",
  18.     imgOutputPath:"img/",
  19.     cssOutputPath:"./css/styles.css",
  20.     devServerOutputPath:"../dist",
  21. }
webpack.config.js 
</>复制代码 
  1. // 获取环境命令，并去除首尾空格
  2. const env = process.env.NODE_ENV.replace(/(s*$)|(^s*)/ig,"");
  3. // 根据环境变量引用相关的配置文件
  4. module.exports = require(`./config/webpack.config.${env}.js`)
  5. webpack.config.base.js
  6. const path = require("path");
  7. // 引入插件
  8. const HTMLWebpackPlugin = require("html-webpack-plugin");
  9. // 清理 dist 文件夹
  10. const CleanWebpackPlugin = require("clean-webpack-plugin")
  11. // 抽取 css
  12. const ExtractTextPlugin = require("extract-text-webpack-plugin");
  13. // 引入多页面文件列表
  14. const config = require("./config");
  15. // 通过 html-webpack-plugin 生成的 HTML 集合
  16. let HTMLPlugins = [];
  17. // 入口文件集合
  18. let Entries = {}
  19. // 生成多页面的集合
  20. config.HTMLDirs.forEach((page) => {
  21.     const htmlPlugin = new HTMLWebpackPlugin({
  22.         filename: `${page}.html`,
  23.         template: path.resolve(__dirname, `../app/html/${page}.html`),
  24.         chunks: [page, "commons"],
  25.     });
  26.     HTMLPlugins.push(htmlPlugin);
  27.     Entries[page] = path.resolve(__dirname, `../app/js/${page}.js`);
  28. })
  29. module.exports = {
  30.     entry:Entries,
  31.     devtool:"cheap-module-source-map",
  32.     output:{
  33.         filename:"js/[name].bundle.[hash].js",
  34.         path:path.resolve(__dirname,"../dist")
  35.     },
  36.     // 加载器
  37.     module:{
  38.         rules:[
  39.             {
  40.                 // 对 css 后缀名进行处理
  41.                 test:/.css$/,
  42.                 // 不处理 node_modules 文件中的 css 文件
  43.                 exclude: /node_modules/,
  44.                 // 抽取 css 文件到多带带的文件夹
  45.                 use: ExtractTextPlugin.extract({
  46.                     fallback: "style-loader",
  47.                     // 设置 css 的 publicPath
  48.                     publicPath: config.cssPublicPath,
  49.                     use: [{
  50.                             loader:"css-loader",
  51.                             options:{
  52.                                 // 开启 css 压缩
  53.                                 minimize:true,
  54.                             }
  55.                         },
  56.                         {
  57.                             loader:"postcss-loader",
  58.                         }
  59.                     ]
  60.                 })
  61.             },
  62.             {
  63.                 test: /.js$/,
  64.                 exclude: /node_modules/,
  65.                 use: {
  66.                     loader: "babel-loader",
  67.                     options: {
  68.                         presets: ["env"]
  69.                     }
  70.                 }
  71.             },
  72.             {
  73.                 test: /.(png|svg|jpg|gif)$/,
  74.                 use:{
  75.                     loader:"file-loader",
  76.                     options:{
  77.                         // 打包生成图片的名字
  78.                         name:"[name].[ext]",
  79.                         // 图片的生成路径
  80.                         outputPath:config.imgOutputPath
  81.                     }
  82.                 }
  83.             },
  84.             {
  85.                 test: /.(woff|woff2|eot|ttf|otf)$/,
  86.                 use:["file-loader"]
  87.             }
  88.         ],
  89.     },
  90.     plugins:[
  91.         // 自动清理 dist 文件夹
  92.         new CleanWebpackPlugin(["dist"]),
  93.         // 将 css 抽取到某个文件夹
  94.         new ExtractTextPlugin(config.cssOutputPath),        
  95.         // 自动生成 HTML 插件
  96.         ...HTMLPlugins
  97.     ],
  98. }
webpack.config.dev.js 
</>复制代码 
  1. // 引入基础配置文件
  2. const webpackBase = require("./webpack.config.base");
  3. // 引入 webpack-merge 插件
  4. const webpackMerge = require("webpack-merge");
  5. // 引入配置文件
  6. const config = require("./config");
  7. // 合并配置文件
  8. module.exports = webpackMerge(webpackBase,{
  9.     // 配置 webpack-dev-server
  10.     devServer:{
  11.         // 项目根目录
  12.         contentBase:config.devServerOutputPath,
  13.         // 错误、警告展示设置
  14.         overlay:{
  15.             errors:true,
  16.             warnings:true
  17.         }
  18.     }
  19. });
webpack.config.prod.js 
</>复制代码 
  1. // 引入基础配置
  2. const webpackBase = require("./webpack.config.base");
  3. // 引入 webpack-merge 插件
  4. const webpackMerge = require("webpack-merge");
  5. // 引入 webpack
  6. const webpack = require("webpack");
  7. // 合并配置文件
  8. module.exports = webpackMerge(webpackBase,{
  9.     plugins:[
  10.         // 代码压缩
  11.         new webpack.optimize.UglifyJsPlugin({
  12.             // 开启 sourceMap
  13.             sourceMap: true
  14.         }),
  15.         // 提取公共 JavaScript 代码
  16.         new webpack.optimize.CommonsChunkPlugin({
  17.             // chunk 名为 commons
  18.             name: "commons",
  19.             filename: "[name].bundle.js",
  20.         }),
  21.     ]
  22. });
webpack.config.lint.js 
</>复制代码 
  1. const webpackBase = require("./webpack.config.base");
  2. const webpackMerge = require("webpack-merge");
  3. const config = require("./config");
  4. module.exports = webpackMerge(webpackBase,{
  5.     module:{
  6.         rules:[
  7.             {
  8.                 test: /.js$/,
  9.                 // 强制先进行 ESLint 检查
  10.                 enforce: "pre",
  11.                 // 不对 node_modules 和 lib 文件夹中的代码进行检查
  12.                 exclude: /node_modules|lib/,
  13.                 loader: "eslint-loader",
  14.                 options: {
  15.                     // 启用自动修复
  16.                     fix:true,
  17.                     // 启用警告信息
  18.                     emitWarning:true,
  19.                 }
  20.             },
  21.         ]
  22.     },
  23.     devServer:{
  24.         contentBase:config.devServerOutputPath,
  25.         overlay:{
  26.             errors:true,
  27.             warnings:true
  28.         }
  29.     }
  30. });
项目结构 
</>复制代码 
  1. │  .babelrc
  2. │  .eslintrc.js
  3. │  .gitignore
  4. │  package.json
  5. │  postcss.config.js
  6. │  webpack.config.js
  7. │  
  8. ├─app
  9. │  │  favicon.ico
  10. │  │  
  11. │  ├─css
  12. │  │      main.css
  13. │  │      
  14. │  ├─html
  15. │  │      index.html
  16. │  │    
  17. │  │      
  18. │  ├─img
  19. │  │      back.png
  20. │  │      
  21. │  ├─js
  22. │  │      ajax.js
  23. │  │      footer.js
  24. │  │      index.js
  25. │  │      nav.js
  26. │  │      public.js
  27. │  │      tity_nav.js
  28. │  │      
  29. │  └─lib
  30. │        flexible.js
  31. │        normalize.css
  32. │        swiper.css
  33. │        swiper.js
  34. │        
  35. └─config
  36.         config.js
  37.         webpack.config.base.js
  38.         webpack.config.dev.js
  39.         webpack.config.lint.js
  40.         webpack.config.prod.js

注释： 想引用jquery而不是每个页面都引用只需要： 引入jquery后如果开启lint检查模式 可以正常使用的前提是每个页面都require 一次

webpack.config.base.js

</>复制代码 
  1. cnpm i jquery --save
  2. const ProvidePlugin = new webpack.ProvidePlugin({
  3.     $: "jquery",
  4.     jQuery: "jquery",
  5. });
引入sass

webpack.config.base.js

</>复制代码 
  1. {
  2.     // s?css => scss或者css
  3.     test:/.s?css$/,
  4.     // 不处理 node_modules 文件中的 css 文件
  5.     exclude: /node_modules/,
  6.     // 抽取 css 文件到多带带的文件夹
  7.     use: ExtractTextPlugin.extract({
  8.         fallback: "style-loader",
  9.         // 设置 css 的 publicPath
  10.         publicPath: config.cssPublicPath,//在 css 中设置背景图像的 url 时，经常会找不到图片（默认会在 css 文件所在的文件夹中寻找），这里设置 extract-text-webpack-plugin 插件的 publicPath 为图片文件夹所在的目录，就可以顺利找到图片了
  11.         use: [{
  12.                 loader:"css-loader",
  13.                 options:{
  14.                     // 开启 css 压缩
  15.                     minimize:true,
  16.                 }
  17.             },
  18.             {
  19.                 loader:"postcss-loader",
  20.             },
  21.             {
  22.                 loader:"sass-loader", 
  23.                 //启用sass 虽然在这只写了sass-loader 但还要下载node-sass
  24.             }
  25.         ]
  26.     })
  27. },
如果import了类似swiper这种库函数 但不处理modules里面的swiper,所以这里要允许除了node_modules里面的swiper的其他所有文件

webpack.config.base.js

</>复制代码 
  1. {
  2.     test: /.js$/,
  3.     exclude: /^node_modules*swiper$/, 
  4.     use: {
  5.         loader: "babel-loader",
  6.         options: {
  7.             presets: ["env"]
  8.         }
  9.     }
  10. },

➳ github地址：点我

GPU云服务器 云服务器 多页面应用 webpack使用 webpack 使用公用cdn webpack cdn配置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100539.html

相关文章

  • Javascript 打包工具

    摘要：所以，打包工具就出现了，它可以帮助做这些繁琐的工作。打包工具介绍仅介绍款主流的打包工具，，，，以发布时间为顺序。它定位是模块打包器，而属于构建工具。而且在其他的打包工具在处理非网页文件比如等基本还是需要借助它来实现。 本文当时写在本地，发现换电脑很不是方便，在这里记录下。 前端的打包工具 打包工具可以更好的管理html，css，javascript，使用可以锦上添花，不使用也没关系...

    Sleepy 评论0 收藏0

  • 使用 Webpack1.x 搭建 （MultiPage Application，MPA） 基础框架

    摘要：初始化项目官方文档项目地址项目搭建简单记录一下命令，网上有很多文章不多做介绍。希望可以提供一个基础的架构。 初始化项目 webpack官方文档：https://www.webpackjs.com/con...github项目地址：https://github.com/Zhanghongw... 项目搭建简单记录一下命令，网上有很多文章不多做介绍。希望可以提供一个基础的架构。 持续更新....

    yy736044583 评论0 收藏0

  • 浅谈使用 Vue 构建前端 10w+ 代码量的单页面应用开发底层

    摘要：其实就是我们开始挂载上去的我们在这里出去，我们就可以在回调里面只处理我们的业务逻辑，而其他如断网超时服务器出错等均通过拦截器进行统一处理。 showImg(https://segmentfault.com/img/remote/1460000015472616?w=845&h=622); 开始之前 随着业务的不断累积，目前我们 ToC 端主要项目，除去 node_modules， bu...

    rickchen 评论0 收藏0

  • 浅谈使用 Vue 构建前端 10w+ 代码量的单页面应用开发底层

    摘要：其实就是我们开始挂载上去的我们在这里出去，我们就可以在回调里面只处理我们的业务逻辑，而其他如断网超时服务器出错等均通过拦截器进行统一处理。 showImg(https://segmentfault.com/img/remote/1460000015472616?w=845&h=622); 开始之前 随着业务的不断累积，目前我们 ToC 端主要项目，除去 node_modules， bu...

    Backache 评论0 收藏0

  • 项目:（MPA应用）企业展示 目录

    项目框架 基础框架：https://segmentfault.com/a/11...使用之前 webpack 搭建的框架。 项目源码 github 地址：https://github.com/Zhanghongw... 页面开发 地址：https://segmentfault.com/a/11...

    wenhai.he 评论0 收藏0

发表评论

登陆后可评论

0条评论

rainyang

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<