The goal of this multi-page development is that different HTML files correspond to different JS files. In the project, we use jquery, bootStrap and stylus, etc. Let’s get started!

The project structure

# we import jquery and bootstrap files locallyCopy the code

Project configuration

Create a project

1. CNPM init first builds a project prototype; 2. CNPM install installs an initialized dependencyCopy the code

Configuration wenpack. Config. Js

1. Find each mother first and go home separately. (After packing, find A.HTML and B.HTML)

1. CNPM install html-webpack-plugin --save-dev Here we do not say much about the specific configuration of this parameter, we say that the multi-page project can be used to build. 2. Here is the webpack.config.js configuration:Copy the code
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']]}})Copy the code
3. Webpack. You can see that the JS file corresponds to the HTML file in the Dist builderCopy the code

2. Perform the jQuery and Bootstrap configurations

Jquery and bootstrap are local static resources. Create a lib folder under SRC and install jquery and bootstrap into it. Here we build jQeury and Bootstrap separately! No more nonsense, directly on the code;Copy the code
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({// write this to make jquery available to the whole world otherwise bootStrapComplains. $:"jquery",
            jQuery: "jquery"."window.jQuery": "jquery"}), new CommonsChunkPlugin({// Pack common library names: ['bootstrap'.'jquery'],
            minChunks: Infinity
        }),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'src/html/a.html'),
            filename: 'a.html',
            chunks: ['bootstrap'.'jquery'.'a'[// Remember to put bootS heretrap}), new HtmlWebpackPlugin({template: path.resolve(__dirname,'src/html/b.html'),
            filename: 'b.html',
            chunks: ['bootstrap'.'jquery'.'b']]}})Copy the code
The following is to merge the files into one, directly on the code, both methods can be, see you need:Copy the code
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'}, 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({// write this to make jquery available to the whole world otherwise bootStrapComplains. $:"jquery",
            jQuery: "jquery"."window.jQuery": "jquery"}), new CommonsChunkPlugin({// Pack common library names: ['vendor'],
            minChunks: Infinity
        }),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'src/html/a.html'),
            filename: 'a.html',
            chunks: ['vendor'.'jquery'.'a'}), new HtmlWebpackPlugin({template: path.resolve(__dirname,'src/html/b.html'),
            filename: 'b.html',
            chunks: ['vendor'.'jquery'.'b']]}})Copy the code

Notice that we haven’t dealt with CSS yet, so here we introduce bootstrap.css to each page.

3. The configuration webpack – dev – server

1. Install CNPM install webpack-dev-server --save-dev 2 "Dev ": "webpack-dev-server --inline --hot --open" Webpage. Config. js and install devServer in your plugins:Copy the code
devServer: {
        contentBase: path.join(__dirname, "dist"), // tell the server where to supply the content. You only need port if you want to provide static files:"3000"// port number open:true// Automatically open a web page with a browser, default istrue
        hot: true// Update openPage:'a.html'// Specify the open page allowedHosts: [// configure a whitelisted list, only HTTP request hosts in the list will return normally"localhost:80"]},Copy the code
Error: Cannot find module 'webpack-cli/bin/config-yargs' 5 Install CNPM install webpack-cli --save-dev 6 We can not pack every time, direct CNPM run dev page can run!Copy the code

4. Configure the CSS-Loader (as described in this section:Juejin. Cn/post / 684490…

Install style-loader csS-loader. 2. Webpack.config. js.Copy the code
module: {
        rules: [{
            test: /\.css$/,
            use: [{
                loader: "style-loader",
                options: {
                    singleton: true}}, {loader:"css-loader",
            }, {
                loader: "less-loader"}}}}]],Copy the code
CNPM install less-loader less --save-devCopy the code
module: {
        rules: [{
            test: /\. Less $/, // change CSS to less. Use: [{loader:"style-loader",
                options: {
                    singleton: true}}, {loader:"css-loader",
            }, {
                loader: "less-loader"}}}}}}}}}}Copy the code

The above is a simple multi-page development of the basic structure, if there are deficiencies and mistakes, please give us more advice, thank you here! Project address: gitee.com/anxiaolu/we…