Webpack4.x 构建多页面打包（2019-01-25）

基础请参考上篇入门： Webpack4.x 入门上手实战（2018.08）

一、开始

根据入门篇构建一个基础的项目，在此基础上进行升级，不再一一叙述，直接上代码：

1、拆分配置文件：

可以根据自己的需求随意拆分，这里简单举例

在根目录新建三个文件：webpack.config.js、webpack.entry.js、webpack.plugins.js

webpack.config.js 是必备的配置文件

const path = require('path')
const entry = require('./webpack.entry.js')

const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require("extract-text-webpack-plugin")

const pluginsConfig = require("./webpack.plugins.js")
const pxtorem = require('postcss-pxtorem')
const autoprefixer = require('autoprefixer')

const optimizeCss = require('optimize-css-assets-webpack-plugin')

module.exports = {
  // JS 执行入口文件
  entry: entry,
  output: {
    // 把所有依赖的模块合并输出到一个 bundle.js 文件
    filename: './js/[name].bundle.js',
    // 输出文件都放到 superStyle 目录下
    path: path.resolve(__dirname, './superStyle'),
  },
  plugins: pluginsConfig,
  optimization: {
    // minimize: true,
    minimizer: [new optimizeCss({})],

  },
  devServer: {
    contentBase: './superStyle',
    port: 7777,
    host: '0.0.0.0',
    openPage: 'page'
  },
  module: {
    rules: [
        {
          test: /\.(png|jpg|gif|eot|svg|ttf|woff)$/,
          use:[{
            loader:'url-loader',
            options:{ 
                limit:2000, // 表示小于2kb的图片转为base64,大于5kb的是路径
                // outputPath:'../images', //定义输出的图片文件夹
                name: 'images/[name].[hash:7].[ext]',
                publicPath:"../"
            }
          }]
        },
        {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
        },
        {
            test: /\.(css|less)$/,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                // publicPath:'../',
                use: [
                    // require.resolve('style-loader'),
                    {
                        loader: 'css-loader',
                        // options: {
                        //     importLoaders: n
                        // }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                          ident: 'postcss',
                          plugins: () => [
                            pxtorem({
                              rootValue: 100,
                              propWhiteList: []
                            }),
                            require('postcss-flexbugs-fixes'),
                            autoprefixer({
                              browsers: [
                                'iOS >= 7',
                                'Android >= 4',
                                '>1%',
                                'Firefox ESR',
                                'not ie < 9'
                              ],
                              flexbox: 'no-2009'
                            })
                          ]
                        }
                    },
                    {
                        loader: 'less-loader',
                        options: { javascriptEnabled: true }
                    }
                ]
            })
        }
    ]
  }
};

webpack.entry.js 入口配置

module.exports = {
    index: './src/js/index.js',
    login: './src/js/login.js'
}

webpack.plugins.js 插件设置

const webpack = require("webpack")
const entry = require('./webpack.entry.js')

// 分离css  > extract-text-webpack-plugin@next
const ExtractTextPlugin = require("extract-text-webpack-plugin")
// 清除目录
const CleanWebpackPlugin = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 压缩
const optimizeCss = require('optimize-css-assets-webpack-plugin')

let html = []

Object.keys(entry).forEach(k => {
    let h = new HtmlWebpackPlugin({
        title: k,
        filename: `./page/${k}.html`,
        template: `./src/page/${k}.html`,
        inject: true,
        chunks: [k]
    })
    html.push(h)
})

module.exports = [
    new CleanWebpackPlugin(['superStyle']),
    new ExtractTextPlugin("./style/[name].css"),
    new optimizeCss({
        assetNameRegExp: /\.style\.css$/g,
        cssProcessor: require('cssnano'),
        cssProcessorOptions: { discardComments: { removeAll: true } },
        canPrint: true
    }),
    new HtmlWebpackPlugin({
        title: "",
        filename: `./index.html`,
        template: `./index.html`,
        inject: true,
        chunks: ['main']
    })
].concat(html)

package.json

{
  "name": "dive-into-webpack",
  "version": "1.0.0",
  "scripts": {
    "dev": "webpack-dev-server --open",
    "build": "webpack"
  },
  "dependencies": {},
  "devDependencies": {
    "autoprefixer": "^9.4.5",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "clean-webpack-plugin": "^1.0.0",
    "css-loader": "^0.28.11",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "postcss-flexbugs-fixes": "^4.1.0",
    "postcss-loader": "^3.0.0",
    "postcss-pxtorem": "^4.0.1",
    "style-loader": "^0.18.2",
    "url-loader": "^1.1.2",
    "webpack": "^4.16.5",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.14"
  }
}

二、目录结构

src 文件夹里存放的就是多页面的，根目录的 index.html 和 main.js 请自行配置，可用作多页面跳转

配置项目录结构

三、打包后的目录结构

打包后的目录结构

四、细节上有不明白的可以留言 ~