webpack 实现多页面开发相关配置（简单版）

这套多页面开发的目标是不同html文件对应不同的js文件，项目中我们要使用jquery，bootStrap以及stylus等； 那我们就开始吧！

项目结构

 # 我们使用本地引入jquery和bootstrap文件

项目配置

创建项目

1.cnpm init  先搭建一个项目的雏形；
2.cnpm install 安装一个初始化的依赖

配置wenpack.config.js

1.先各找各妈，各回各家（打包后a.js找a.html，b.js找b.html）

1.cnpm install html-webpack-plugin  --save-dev  这个插件是找到妈妈的关键哦！在这里不过多的说这个参数的具体配置，我们说一说这个多页面项目的搭建可以用到的。
2.下面是webpack.config.js配置：

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        "a": path.resolve(__dirname, 'src/js/a.js'),
        "b": path.resolve(__dirname, 'src/js/b.js')
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name].js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'src/html/a.html'),
            filename: 'a.html',
            chunks: ['a']
        }),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'src/html/b.html'),
            filename: 'b.html',
            chunks: ['b']
        })
    ]
}

 3.webpack打包一下，可以看到在dist生成文件中找到了js文件对应html文件

2.接下来进行jQuery和Bootstrap的配置

 这里配置的jquery和bootstrap是本地静态资源，在src下创建一个lib文件夹，把jquery和bootstrap装进去！
 这里我们把jqeury和bootstrap分开打包构建的！废话不多说了，直接上代码；

const webpack = require("webpack");
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;

module.exports = {
    entry: {
        "a": path.resolve(__dirname, 'src/js/a.js'),
        "b": path.resolve(__dirname, 'src/js/b.js'),
        'bootstrap': ['bootstrap'],
        'jquery': ['jquery']
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name].js'
    },
    resolve: {
        alias: {
            jquery: path.resolve(__dirname, 'src/lib/jquery.js'),
            bootstrap: path.resolve(__dirname, 'src/lib/bootstrap.js'),
        }
    },
    plugins: [
        new webpack.ProvidePlugin({ //这样写是为了让全局可以查到jquery否则bootStrap会报错。
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        }),
        new CommonsChunkPlugin({ //打包共用库
            names: ['bootstrap', 'jquery'],
            minChunks: Infinity
        }),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'src/html/a.html'),
            filename: 'a.html',
            chunks: ['bootstrap', 'jquery', 'a'] //这里记得要把bootStrap和jquery分别引进去
        }),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'src/html/b.html'),
            filename: 'b.html',
            chunks: ['bootstrap', 'jquery', 'b']
        })

    ]
}

 下面这种是把文件合并成一个，直接上代码，两种方法都可以，看大家得需要：

const webpack = require("webpack");
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;

module.exports = {
    entry: {
        "a": path.resolve(__dirname, 'src/js/a.js'),
        "b": path.resolve(__dirname, 'src/js/b.js'),
        "vendor": ['jquery', 'bootstrap']  //使用合并打包，会产生一个webpack打包构建依赖的文件，在引用的时候要引进去
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name].js'
    },
    resolve: {
        alias: {
            jquery: path.resolve(__dirname, 'src/lib/jquery.js'),
            bootstrap: path.resolve(__dirname, 'src/lib/bootstrap.js'),
        }
    },
    plugins: [
        new webpack.ProvidePlugin({ //这样写是为了让全局可以查到jquery否则bootStrap会报错。
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        }),
        new CommonsChunkPlugin({ //打包共用库
            names: ['vendor'],
            minChunks: Infinity
        }),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'src/html/a.html'),
            filename: 'a.html',
            chunks: ['vendor', 'jquery', 'a'] //所以这里我们得引入两个文件vendor和jQuery
        }),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'src/html/b.html'),
            filename: 'b.html',
            chunks: ['vendor', 'jquery', 'b']
        })

    ]
}

注意到这步，我们还没有处理css，在这里我们哪个页面就将bootstrap.css引入哪个页面。

3.配置webpack-dev-server

 1.安装 cnpm install webpack-dev-server --save-dev
 2.在package.json的scripts中我们加一句话："dev": "webpack-dev-server  --inline --hot --open"  开启页面
 3.在webpage.config.js中在plugins里配置devServer:

devServer: {
        contentBase: path.join(__dirname, "dist"), //告诉服务器从哪里提供内容。只有在你想要提供静态文件时才需要
        port: "3000", //端口号
        open: true, //自动用浏览器打开网页，默认是true
        hot: true, //热更新
        openPage: 'a.html', //指定打开的页面
        allowedHosts: [ //配置一个白名单列表，只有HTTP请求的HOST在列表里才正常返回
            "localhost:80"
        ]
    },

 4.本来是开心的使用cnpm run dev 开启页面，但是错不棘手的报了一个错： Error: Cannot find module 'webpack-cli/bin/config-yargs'
 5.安装 cnpm install webpack-cli --save-dev
 6.我们就可以不用每一次都打包了，直接cnpm run dev 页面就可以跑起来了！

4.配置css-loader （这节之前有过介绍：juejin.cn/post/684490…

 1.安装   style-loader  css-loader 
 2.webpack.config.js进行配置：

module: {
        rules: [{
            test: /\.css$/,
            use: [{
                loader: "style-loader",
                options: {
                    singleton: true //多个style标签合为一个
                }
            }, {
                loader: "css-loader",
            }, {
                loader: "less-loader"
            }]
        }]
    },}

 3.我们再装一个less试试：
   cnpm install less-loader less --save-dev
 4.webpack.configjs的配置，我们需要再次改改：

module: {
        rules: [{
            test: /\.less$/, //把css改成less后缀名
            use: [{
                loader: "style-loader",
                options: {
                    singleton: true //多个style标签合为一个
                }
            }, {
                loader: "css-loader",
            }, {
                loader: "less-loader"
            }] //use中的loader时从后往前处理，应该是先读取less然后解析成css，最后添加到style标签中
        }]
    }

以上就是简单的多页面开发的基本结构，如有不足和错误的地方请大家多多赐教，在此感谢大家！ 项目的地址：gitee.com/anxiaolu/we…