Webpack4.x|Webpack4.x 构建多页面打包(2019-01-25)

基础请参考上篇入门: Webpack4.x 入门上手实战(2018.08)
一、开始 根据入门篇构建一个基础的项目,在此基础上进行升级,不再一一叙述,直接上代码:
1、拆分配置文件:
可以根据自己的需求随意拆分,这里简单举例
在根目录新建三个文件:webpack.config.jswebpack.entry.jswebpack.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 } } ] }) } ] } };

【Webpack4.x|Webpack4.x 构建多页面打包(2019-01-25)】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.htmlmain.js 请自行配置,可用作多页面跳转
Webpack4.x|Webpack4.x 构建多页面打包(2019-01-25)
文章图片
配置项目录结构 三、打包后的目录结构 Webpack4.x|Webpack4.x 构建多页面打包(2019-01-25)
文章图片
打包后的目录结构 四、细节上有不明白的可以留言 ~

    推荐阅读