webpack 配置记录篇(MPA)

本篇文章记录一下webpack多页面配置信息,也算对之前的一些webpack只是进行巩固

1.首先我们先创建一个项目

2.安装webpack

3.编写webpack.config.js 的配置文件

然后呢 就进行试验操作, 基本没啥问题之后呢 就进行分块,总共将webpack的配置文件分为三块

webpack.config.base.js // 基础配置
webpack.config.dev.js // 开发服务器配置 
webpack.config.prod.js // 生产环境配置 

然后呢 可以我们通过npm 进行启动webpack

"build": "webpack --config build/webpack.config.prod.js",
"start": "webpack-dev-server --config build/webpack.config.dev.js"

接下来看一下目录

然后我们来说说目录

build : 构建工具配置文件存放目录
dist : 构建之后的目录
src 
    assets 静态资源目录 
    index index页面 
    list list页面 
    meta 公共头文件
postcss.config.js  postcss 的配置文件 

webpack.config.base.js

const path = require('path')
var HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const global = require('glob')

// 多页面的核心其实就在于你用一种规律的文件目录, 然后动态生成entry 和 htmlplugin 
// 利用global 
function initMpa () {
    const chunkFiles = global.sync(path.join(__dirname , '../src/*/index.js'))
    const chunkConfig = {}
    const htmlPlugins = []
    chunkFiles.forEach(chunkFile  => {
        const match = chunkFile.match(/src\/\w+\/index.js/)[0];
        const chunkName = match.split('/')[1]
        chunkConfig[chunkName] = path.join(__dirname ,'../', match)
        htmlPlugins.push(new HtmlWebpackPlugin({
            filename : chunkName + '.html' ,
            template : path.join(__dirname , '../src/'+chunkName+'/index.html'),
            chunks: [chunkName],
            minify: {
                removeAttributeQuotes:true,
                removeComments: true,
                collapseWhitespace: true,
                removeScriptTypeAttributes:true,
                removeStyleLinkTypeAttributes:true
            }
        }))
    })
    // 将自动生成的配置导出 
    return {
        chunkConfig,
        htmlPlugins
    }
}
const {chunkConfig , htmlPlugins} = initMpa()

module.exports = {
    entry: chunkConfig,
    output:{
        filename : 'chunk_[chunkhash:8].js',
        path : path.join(__dirname , '/../dist')
    },
    module: {
        rules: [
            // js 默认是webpack 自动识别的, 但是我们可能会需要使用到babel , 所以就将js 给babel-loader 进行处理 
            {
                test : /\.js$/ ,
                exclude: /(node_modules|bower_components)/,
                use : {
                    loader: "babel-loader" ,
                    options :{
                        presets : ['env']
                    }
                }
            },
            {
                test: /\.(png|svg|jpeg|jpg)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 50000,
                            name: 'images/[name]_[hash].[ext]'
                        }
                    }
                ]
            }
        ]
    },
    // 将生成的 htmlPlugins 填充到配置里面去 
    plugins: [
        ...htmlPlugins ,
        new CleanWebpackPlugin({}),
    ]
}

那么webpack.config.prod.js 呢主要负责生产环境的一些相关配置, 如 css 压缩啊, css 分离啊 等等

const baseConfig = require('./webpack.config.base')
const merge = require("webpack-merge")
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const optimizeCss = require('optimize-css-assets-webpack-plugin');

const prodConfig = {
    mode:'production',
    // 不适用源代码映射
    devtool: "none",
    module:{
      rules:[
          {
              test: /\.css$/i,
              use: [
                  {
                      loader: MiniCssExtractPlugin.loader,
                      options: {
                          // 这里可以指定一个 publicPath
                          // 默认使用 webpackOptions.output中的publicPath
                          publicPath: '../'
                      },
                  },
                  'css-loader',
                  'postcss-loader'
              ]
          },
      ]
    },
    plugins: [
        new optimizeCss({
            // 需要压缩的css 以.css为后缀的文件
            assetNameRegExp: /\.css$/g,
            cssProcessor: require('cssnano'),
            cssProcessorOptions: { discardComments: { removeAll: true } },
            canPrint: true
        }),
        new MiniCssExtractPlugin({
            filename: "[name].[chunkhash:8].css",
            chunkFilename: "[id].css"
        }),

    ]
}

module.exports = merge(baseConfig , prodConfig)

webpack.config.dev.js 就是 hmr 的一些配置

const baseConfig = require('./webpack.config.base')
const merge = require("webpack-merge");

const devConfig = {
    mode: 'development',
    devtool: "inline-source-map",
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: [
                    'style-loader',
                    'css-loader',
                    'postcss-loader'
                ]
            },
        ]
    },
    devServer: {
        contentBase: '../dist',
        port: 9000,
        open: true
    },
}

module.exports = merge(baseConfig, devConfig)

这就是所有的配置, 然后值得一提的是 . 还加入了html 内联 , 如 src/index/index.html 利用raw-loader 内联meta.html 进来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    ${ require('raw-loader!../meta.html') }
    <title>Index html </title>
</head>
<body>
</body>
</html>

总共的 就是 js压缩(webpack mode=production 内置) , css 分离 + css 压缩 + 自动添加css3 前缀 , 内联加载

有时间在加上vue的cdn

END