webpack 多页面配置

webpack 配置介绍。

entry：打包入口，在这里的js文件以及在里面被引用的文件会被webpack 找到 打包。

module：模块 最常用的就是配置各种加载器 表示进行转换时，应该使用哪个 loader。

output：打包输出配置，输出在哪里，输出的命名规则等。

plugins：插件配置，这个大大加强了webpack的灵活性，现在已经有大量的 人贡献的插件。

项目结构

image.png

entry配置

entry 参数有多种，可以 字符串，对象 数组都可以。对象适合多页面配置，字符串数组适合单页应用。

这里主要介绍下多页面。拿我们的项目 为例，一个文件夹为一个页面单位，js html都在此文件夹里面

首先 使用node 的 fs模块 遍历页面文件夹 找到里面的 index.js， 拼上 文件夹名称 组成键值对，

    // 找出page 下面文件夹 组装entry入口配置
    let entry = {};
    // 获取目录下所有文件夹名称（包含文件）,有必要的话可以判断是不是文件夹
    const directories = (fs.readdirSync(filePath) || []);
    directories.filter((item) => {
        // 找到页面文件夹之后 再找到里面的 index.js 组成键值对
        const jsPath = `${config.pageBasePath}/${item}/index.js`;
        if (fs.existsSync(jsPath)) {
            entry[item] = jsPath;
        }
    });
    return entry;

组成如下的 键值对入口配置

    {  
        pageName: 'xx/xx/index.js'
    }

plugins 插件

生成页面配置

由于多页面 我们需要找到 每一个页面 并输出。

    // 找出 所有的页面文件夹名
    const directories = (fs.readdirSync(filePath) || []);
    // 遍历所有的页面 组装打包输出的 html 配置
    const htmlPlugin = directories.map((item) => {
        // 业余页面 主页地址
        const htmlPath = `${config.pageBasePath}/${item}/index.tpl`;
        if (fs.existsSync(htmlPath)) {
            // 组装 打包html 参数
            return new HtmlWebpackPlugin({
                minify: false,
                template: htmlPath, //
                filename: `${item}.html`, // 生成的html页面的名字为one.html `${item}.html`
                title: 'one', //它的title为one，记得要在src/one.html中加入<%= %>
                hash: true,
                chunks: [item] // chunks主要用于多入口文件，选择你要使用那些js文件
            })
        }
    });
    return htmlPlugin;

HtmlWebpackPlugin 打包 html插件配置：

title: 用来生成页面的 title 元素
filename: 输出的 HTML 文件名，默认是 index.html, 也可以直接配置带有子目录。
template: 模板文件路径，支持加载器，比如 html!./index.html
inject: true | 'head' | 'body' | false  ,注入所有的资源到特定的 template 或者 templateContent 中，如果设置为 true 或者 body，所有的 javascript 资源将被放置到 body 元素的底部，'head' 将放置到 head 元素中。
favicon: 添加特定的 favicon 路径到输出的 HTML 文件中。
minify: {} | false , 传递 html-minifier 选项给 minify 输出
hash: true | false, 如果为 true, 将添加一个唯一的 webpack 编译 hash 到所有包含的脚本和 CSS 文件，对于解除 cache 很有用。
cache: true | false，如果为 true, 这是默认值，仅仅在文件修改之后才会发布文件。
showErrors: true | false, 如果为 true, 这是默认值，错误信息会写入到 HTML 页面中
chunks: 允许只添加某些块 (比如，仅仅 unit test 块)
chunksSortMode: 允许控制块在添加到页面之前的排序方式，支持的值：'none' | 'auto' | 'dependency' |'manual' | {function} - default: 'auto'
excludeChunks: 允许跳过某些块，(比如，跳过单元测试的块) 

关于 chunksSortMode 推荐使用 manual 手动排序，按照chunks 数组的顺序插入页面。

压缩js 配置

使用 webpack-parallel-uglify-plugin 进行压缩 可以多线程操作，效率更高

    new ParallelUglifyPlugin({
        // 传递给 UglifyJS 的参数
        sourceMap: true,
        uglifyJS: {
            output: {
                // 最紧凑的输出
                beautify: false,
                // 删除所有的注释
                comments: false,
            },
            compress: {
                // 在UglifyJs删除没有用到的代码时不输出警告
                // 删除所有的 `console` 语句，可以兼容ie浏览器
                drop_console: true,
                // 内嵌定义了但是只用到一次的变量
                collapse_vars: true,
                // 提取出出现多次但是没有定义成变量去引用的静态值
                reduce_vars: true,
            }
        },
    }),

环境变量配置

配置环境变量 在打包的时候 传入参数控制。

        new webpack.DefinePlugin({
            'process.env': JSON.stringify(staticData)
        }),

打包代码加入注释（版权类的）

  new webpack.BannerPlugin('版权所有，翻版必究'),

module loader配置

主要配置 css相关和 html相关的 loader，

    module: {
        rules: [
            {
               test: /\.css$/,  // 正则匹配所有.css后缀的样式文件
               use: ['style-loader', 'css-loader'], // 使用这两个loader来加载样式文件
               include: [
                    path.resolve(__dirname, './src') // 配置路径 当前loader 只对某个路径下的文件生效
               ],
            },
            {
                test: /\.less$/,
                use: ['style-loader','css-loader', 'less-loader']
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,  // 优化处理加快速度
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.tpl$/,
                loader: 'art-template-loader',
            },
        ],
    },

也可以在项目里面 使用 require 加载文件指定loader; 会覆盖上面的配置。
比如：

  require('style-loader!css-loader?modules!./styles.css');

output 输出配置

path 打包之后的文件输出目标地址。
filename 输出的文件命名规则。

    // 打包输出配置
    output : {
        path : path.join(__dirname, 'build/sources'), // 打包输出的路径  打包后的文件存放的地方
        filename: '[name].bundle.js', // bundle  输出之后的文件名 [hash].
        publicPath: 'sources/', // 规定所有已经解析的文件目录，url相对于index.html。
    },

resolve 路径别名配置

    // 配置路径别名 
    resolve:{
        alias: {
            src: path.resolve(__dirname, "src/"),
            commonJs: path.resolve(__dirname, "src/scripts/common/"),
        }
    },

devtool 配置

devtool里的有7种SourceMap模式 开发环境使用 eval 比较方便

模式	解释
eval	每个module会封装到 eval 里包裹起来执行，且会在末尾追加注释 //@ sourceURL.
source-map	生成一个SourceMap文件.
hidden-source-map	和 source-map 一样，但不会在 bundle 末尾追加注释.
inline-source-map	生成一个 DataUrl 形式的 SourceMap 文件.
eval-source-map	每个module会通过eval()来执行，并且生成一个DataUrl形式的SourceMap.
cheap-source-map	生成一个没有列信息（column-mappings）的SourceMaps文件，不包含loader的 sourcemap（譬如 babel 的 sourcemap）
cheap-module-source-map	生成一个没有列信息（column-mappings）的SourceMaps文件，同时 loader 的 sourcemap 也被简化为只包含对应行的。

devServer 配置服务参数

    devServer: {
        
        // 服务端口配置
        port: '8066',
        // 自定义请求头数据 Response Headers
        headers: {
            key: 'value'
        },
        // 热更新配置
        contentBase: path.join(__dirname, 'build/'),
        publicPath: '/sources',
        hot: true,
        
        // 转发配置
        proxy: {
            '/api': {
                target: 'http://localhost:3000',
                secure: false
            }
        }
    }

devServer 可以配置 代理转发，热更新 服务端口等。

---

话外：
npm install module-name -save 自动把模块和版本号添加到dependencies部分
npm install module-name -save-dev 自动把模块和版本号添加到devdependencies部分
dependencies 是生产环境使用。
devdependencies 是开发环境。
比如：
art-template jquery numeral 等第三方组件 是需要在生产环境使用的，必须安装到 dependencies 。

style-loader sass-loader webpack 等 是在打包构建时候需要，生产环境并不需要的 安装到 devdependencies 。