安裝webpack相關組件

webpack

安裝
npm install --save-dev webpack

webpack-cli

安裝
npm install --save-dev webpack-cli

webpack-merge 用于配置合并

安裝
npm install --save-dev webpack-merge

webpack-dev-server 用于創(chuàng)建web服務器和使用實時重新加載的能力

安裝
npm install --save-dev webpack-dev-server

配置中會使用到你的插件及加載器

html-webpack-plugin 主要用于生成html頁面

安裝
npm install --save-dev html-webpack-plugin

copy-webpack-plugin 將單個文件或整個目錄復制到構建目錄猜揪。

安裝
npm install copy-webpack-plugin --save-dev

clean-webpack-plugin 用于在構建之前刪除/清理構建文件夾

安裝
npm install clean-webpack-plugin --save-dev

mini-css-extract-plugin 此插件將CSS提取到單獨的文件中慨灭。它為每個包含CSS的JS文件創(chuàng)建一個CSS文件(webpack4推薦使用css插件)

安裝
npm install --save-dev mini-css-extract-plugin

uglifyjs-webpack-plugin 這個插件使用uglify-js來縮小你的JavaScript游添。

安裝
npm install uglifyjs-webpack-plugin --save-dev

optimize-css-assets-webpack-plugin 用于優(yōu)化\最小化CSS資產省艳。

安裝
npm install --save-dev optimize-css-assets-webpack-plugin

目錄結構

|--src
    |--assets
    |--css
    |--image
    |--js
    |--tool
    |--views
    |--common.js
    |--favicon.ico
    |--index.css
    |--index.html
    |--main.js
|--.babelrc
|--package.json
|--package-lock.json
|--postcss.config.js
|--webpack.base.conf.js
|--webpack.dev.conf.js
|--webpack.prod.conf.js

配置

webpack.base.conf.js

const path = require('path');//引入nodejs路徑模塊, 用于操作文件路徑污朽。
const glob = require('glob');//引入glob, 用于解析路徑（查找文件）
const webpack = require("webpack");//引入webpack, 用于訪問webpack內置插件
const HtmlWebpackPlugin = require('html-webpack-plugin');//通過模板生成html頁面的插件(用于生成html頁面)
const copyWebpackPlugin = require("copy-webpack-plugin");//靜態(tài)資源輸出(原始輸出不編譯)

//檢索目錄拼接入口
function getEntry(){
    var entry = {"main": './src/main.js',"wx":'./src/common.js'};
    //檢索src/views目錄下index.js =》  index.js父目錄名稱作為入口key， index.js所在路徑作為入口路徑
    glob.sync(__dirname+'/src/views/**/@(index).js').forEach(function (name) {
        var start = name.indexOf('/');
        var end =  name.lastIndexOf('/');
        var n = name.slice(start,end);
        var start1 = n.lastIndexOf('/')+1;
        var end1 =  n.length;
        var key = n.slice(start1,end1);
        entry[key] = name;
    });
    return entry;
};

//入口
let entry = getEntry();

//HtmlWebpackPlugin
function getHtml(){
    var plugins=[];
    for(var i in entry ){
        var start = entry[i].indexOf('src')+4;
        var end = entry[i].lastIndexOf('/');
        var pathStr = entry[i].slice(start,end);
        if(i=='wx'){
            plugins.push(
                new HtmlWebpackPlugin({
                    favicon: path.resolve(__dirname, 'src/favicon.ico'),//添加網頁圖標
                    title: "",//添加網頁標題
                    chunks: [i,"code"],
                    filename: path.resolve(__dirname, `dist/insurance-mall/wx.html`),
                })
            );
        }else{
            plugins.push(
                new HtmlWebpackPlugin({
                    favicon: path.resolve(__dirname, 'src/favicon.ico'),//添加網頁圖標
                    title: "",//添加網頁標題
                    'meta': {//添加meta屬性
                        'viewport': 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no',
                        'renderer': 'webkit',
                        'X-UA-Compatible': {'http-equiv': 'X-UA-Compatible', 'content': 'IE=Edge'},
                        'MSThemeCompatible': {'http-equiv': 'MSThemeCompatible', 'content': 'Yes'},
                        'imagetoolbar': {'http-equiv': 'imagetoolbar', 'content': 'No'},
                        'format-detection': 'email=no,telephone=no',
                        'MSSmartTagsPreventParsing': 'True',
                        'Access-Control-Allow-Origin': '*',
                        'keywords': '',
                        'description': ''
                    },
                    chunks: [i,'code'],
                    filename:path.resolve(__dirname, `dist/insurance-mall/${pathStr==''?'index':pathStr}.html`),
                    template: path.resolve(__dirname, `src/${pathStr}/index.html`)
                })
            );
        }
    };
    return plugins;
};

//HtmlWebpackPlugin
let plugins = getHtml();

module.exports = {
    //入口文件的配置項
    entry:entry,
    //出口文件的配置項
    output: {
        //所有輸出文件的目標路徑
        path: path.resolve(__dirname, 'dist/insurance-mall')
    },
    //插件牺氨，用于生產模板和各項功能
    plugins: [
        //自動加載模塊
        new webpack.ProvidePlugin({
            $: "jquery", //如：在模塊中使用$('#item'); // <= 起作用會自動加載jquery
            jQuery: "jquery",
            Vue: ['vue/dist/vue.esm.js', 'default']
        }),
        //不編譯輸出
        // new copyWebpackPlugin([{
        //     from: path.resolve(__dirname, "src/assets"),
        //     to: './pulic'
        // }]),
        ...plugins
    ],
    //模塊：例如解讀CSS,圖片如何轉換锁施，壓縮
    module: {
        rules: [
            {
                test: /\.(jsx|js)$/,
                use: {
                    loader: 'babel-loader'  //會自動使用根目錄下的.babelrc配置文件
                },
                include: path.resolve(__dirname, "src"),//檢索src目錄下的.jsx|.js文件并使用babel-loader加載器加載
                exclude: path.resolve(__dirname, "node_modules") //不檢索node_modules目錄下的.jsx|.js文件
            },
            {
                test: /\.(htm|html)$/i,
                use: [{
                        loader: 'html-withimg-loader'
                    }, {
                        loader: 'html-loader',
                        options: {
                            attrs: ['img:data-original', 'img:src']
                        }
                    }]
            },
            {
                test: /\.(png|svg|jpg|gif|jpeg)$/,
                use: [{
                    loader: 'url-loader', //是指定使用的loader和loader的配置參數(shù)
                    options: {
                        limit: 500,  //是把小于500B的文件打成Base64的格式，寫入JS
                        name: "[hash:8].[name].[ext]",
                        outputPath: 'images',  //打包后的圖片放到images文件夾下
                    }
                }, {
                    loader: 'image-webpack-loader'
                }]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.(csv|tsv)$/,
                use: [
                    'csv-loader'
                ]
            },
            {
                test: /\.xml$/,
                use: [
                    'xml-loader'
                ]
            }
        ]
    },
    //解析模塊請求的選項
    resolve: {
        alias: {
            "@src": path.resolve("src"),
            "@images": path.resolve("src/images")
        }
    },
    optimization: {
        splitChunks: {
            chunks: 'all',
            name:false,
            cacheGroups: {
                commons: {
                    name: 'code',
                    chunks: 'initial',
                    minChunks: 2    //分割前必須共享模塊的最小塊數(shù)咐低。
                }
            }
        },
        removeAvailableModules: true,//當這些模塊已包含在所有父項中時揽思，告訴webpack檢測并從塊中刪除模塊
        removeEmptyChunks: true,//告訴webpack檢測并刪除空的塊
        mergeDuplicateChunks: true,//告訴webpack合并包含相同模塊的塊
    }
    //context: path.resolve(__dirname, 'src')    //指定編譯基本目錄
};

webpack.dev.conf.js

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.base.conf.js');

module.exports = merge(common, {
    //出口文件的配置項
    output: {
        // 「入口分塊(entry chunk)」的文件名模板（出口分塊？）  //打包的文件名稱
        filename:'js/[name].js',
        // 輸出解析文件的目錄见擦，url 相對于 HTML 頁面
        publicPath: "http://localhost:80/insurance-mall/"
    },
    devtool: 'inline-source-map',
    devServer: {
        //設置基本目錄結構,用于找到程序打包地址
        contentBase:path.join(__dirname,'dist'),
        //服務器的IP地址钉汗，可以使用IP也可以使用localhost
        host:'localhost',
        //在所有響應中添加首部內容
        headers: {
            "Access-Control-Allow-Origin": "*"
        },
        open:true,
        //服務端壓縮是否開啟
        //compress:true,
        //繞過主機檢查
        disableHostCheck: true,
        //網絡廣播服務器
        //bonjour: true,
        //此選項允許瀏覽器使用您的本地IP打開
        useLocalIp: false,
        //配置服務端口號
        port:80,
        //是否開啟熱重載
        hot: true
    },
    plugins: [
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    module: {
        rules:[
            {
                test: /\.css$/,
                use: [{
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                }, {
                    loader: "postcss-loader"
                }]
            },
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader"
                },{
                    loader: "css-loader"
                }, {
                    loader: "less-loader"
                }]
            },
            {
                test: /\.scss$/,
                use: [{
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                }, {
                    loader: "sass-loader"
                }]
            }
        ]
    },
    mode: "development"

webpack.prod.conf.js

const merge = require('webpack-merge');//用于合并webpack配置
const CleanWebpackPlugin = require('clean-webpack-plugin');// 清除目錄等(dist)
const MiniCssExtractPlugin = require("mini-css-extract-plugin");//提取css（webpack4支持）
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");//壓縮
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");//縮小輸出css
const common = require('./webpack.base.conf.js');

module.exports = merge(common, {
    //出口文件的配置項
    output: {
        // 「入口分塊(entry chunk)」的文件名模板（出口分塊？）  //打包的文件名稱
        filename:'js/[name].[chunkhash].js',
        publicPath: " "
    },
    plugins: [
        //清理打包代碼目錄
        new CleanWebpackPlugin(['dist']),
        new MiniCssExtractPlugin({
            filename: 'css/[name].[contenthash].css'
        }),
    ],
    module: {
        rules:[
            {
                test: /\.css$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader
                }, {
                    loader: "css-loader"
                }, {
                    loader: "postcss-loader"
                }]
            },
            {
                test: /\.less$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader
                },{
                    loader: "css-loader"
                },{
                    loader: "postcss-loader"
                }, {
                    loader: "less-loader"
                }]
            },
            {
                test: /\.scss$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader
                }, {
                    loader: "css-loader"
                },{
                    loader: "postcss-loader"
                }, {
                    loader: "sass-loader"
                }]
            }
        ]
    },
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: true
            }),
            new OptimizeCSSAssetsPlugin({})
        ]
    },
    mode:"production"
});

.babelrc

{
  "presets": ["@babel/preset-react", "@babel/preset-env"]
}

postcss.config.js

module.exports={
    plugins: [
        require('autoprefixer') //自動添加前綴插件
    ]
}

webpack4入門配置（多頁面）

webpack4入門配置（多頁面）

安裝webpack相關組件

配置中會使用到你的插件及加載器

目錄結構

配置