webpack+jquery+bootStrap构建多页面应用（二）

一、生成html文件的插件html-webpack-plugin 参考：https://www.cnblogs.com/wonyun/p/6030090.html

1.在src/pages目录下有多个文件夹a,b,c,...，分别存放不同的页面a.html,a.js,a.css；

2.通过遍历的方式将所有html文件打包到dist,并自动引入js

const activityEntry = config.entry;//activityEntry是一个数组，盛放页面文件夹的名称，如[a,b,c,...];

const HtmlWebpackPluginData = [];

//遍历生成多个HtmlWebpackPlugin实例

activityEntry.forEach(function (item) {

    HtmlWebpackPluginData.push(

        new HtmlWebpackPlugin({

            filename: `${item}.html`,//输出的html文件 对应output 的path

            template: path.join(__dirname, `src/pages/${item}/index.html`),

            chunks: [item],

            minify: { //压缩html代码

                //删除空格

                collapseWhitespace: true,

                //删除注释

                removeComments: true

            }

        })

    );

   //多个入口文件

    entryData[item] = path.join(__dirname, `src/pages/${item}/index.js`);

})

 

module.exports = {

   //入口

    entry: {

        ...entryData

    },

   //出口

    output: {

        path: path.resolve(__dirname, "dist"),//打包的html css js文件都放到dist文件夹下

        filename: "js/[name]_[chunkhash:8].js",//输出的js文件

        // publicPath: "/"

    },

}

 

plugins: [

        ...HtmlWebpackPluginData,

]

二、清除文件clean-webpack-plugin  参考：https://www.cnblogs.com/xiaozhumaopao/p/10792168.html

三、css样式抽离插件mini-css-extract-plugin 参考：https://www.cnblogs.com/blackgan/p/10590540.html

注：js文件可通过import引入 css/scss/less文件，使用mini-css-extract-plugin插件可使引入的样式文件从js文件拆离，生成单独的css文件；

plugins: [

        new MiniCssExtractPlugin({

            filename: `css/[name].css`,//输出的css文件 对应output

            chunkFilename: "[id].css"

        }),

]