webpack:^4.x.x打包单页面或多页面应用

注意事项

1.切记一个项目中cnpm切不可与npm交叉使用，安装依赖选用cnpm即可。

(-D代表–save-dev，安装在devDependencies中。-S代表–save)

cnpm i css-loader style-loader -D

cnpm i css-loader style-loader -S

2.安装的依赖或者插件，对于版本有要求的，尽量一条命令进行安装

原因： 主要是解决版本不匹配的问题
例如：安装babel

在webpack 4.2以上使用：

npm install -D babel-loader @babel/core @babel/preset-env

单页面/多页面应用构建，webpack打包基本流程

新建一个项目文件夹，并进入

• 初始化一个package.json

npm init

• cnpm安装webpack工具
• 项目根目录新建webpack.config.js文件

- 单页面webpack.config.js示例

	1. module.exports中exports带s；
	2. output输出文件路径必须为绝对路径；

var path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {//exports带s
    entry:'./src/index.js',
    output:{
        path:path.join(__dirname,'./dist'),//指定绝对路径
        filename:'vue-toast-demo.js',
        libraryTarget: "umd",//指定文件加载格式,umd打包后支持多种加载方式
        library:"VueToastDemo",//指定打包库的名字
    },
    mode: 'development', // 设置mode
    plugins: [
        // make sure to include the plugin for the magic
        new VueLoaderPlugin()
    ],
    module:{//模块解析器
        rules:[//指定需要解析的文件
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            }, // 处理 scss 文件的 loader
            {
                test:/\.vue$/,//正则表达式匹配
                loader:'vue-loader',//解析器
                exclude:/node_modules/,//排除该目录的编译
                options:{//配置css解析
                    loaders:{
                        scss:'style-loader!css-loader!sass-loader'
                    }
                }
            },
            {
                test:/\.js$/,
                loader: 'babel-loader',
                exclude:/node_modules/,//排除该目录的编译
                include:path.join(__dirname,'src'),
            }
        ]
    },
};

- 多页面webpack.config.js示例，并引入jQuery

注意：
1. module.exports中exports带s；
2. output输出文件路径必须为绝对路径；
3. entry的入口是多个文件；
4. css规则是抽取为单独的文件进行加载，还是插入到页面中去；
5. 抽取多个页面公用部分，webpack4.x起，使用webpack.optimize.SplitChunksPlugin；
6. 压缩打包文件optimization:用法如下；

var path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const webpack = require("webpack");

module.exports = {
    entry:{
        vendor:['jquery','./src/js/comment.js'],
        index:'./src/js/index.js',
        cart:'./src/js/cart.js',
    },
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'js/[name].js',//name为变量
        publicPath:''
    },
    mode:'development',
    module:{
        rules: [
            {
                test:/\.css$/,
                include:path.join(__dirname,'src'),
                exclude: /node_modules/,
                use:[MiniCssExtractPlugin.loader, 'css-loader'],//这样子会被抽取成文本进行加载，若想要插入到html中去loader:'style-loader!css-loader'即可,
            },
            {
                test:/\.js$/,
                include:path.join(__dirname,'src'),
                exclude: /node_modules/,
                loader:'babel-loader',
            }
            ],

    },
    optimization:{
        minimizer:[
            new UglifyJSPlugin({
                uglifyOptions: {
                    output: {
                        comments: false
                    },
                    compress: {
                        warnings: false,//压缩注释
                        drop_debugger: true,
                        drop_console: true
                    }
                }
            })
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            filename: 'index.html',//打包后的输出名字
            template: './src/index.html',
            chunks:['index','vendor'],//指定块，也就是指定生成的index.html中引用那个js文件
        }),//多页面因此需要多个实例化，并配置
        new HtmlWebpackPlugin({
            filename: 'cart.html',
            template: './src/cart.html',
            chunks:['cart','vendor'],
            minify:{//html压缩
                removeComments:true,//删除注释
                collapseWhitespace: true,//清除空格
            }
        }),
        new CleanWebpackPlugin({
            verbose:true,
            dry:false
        }),

        new webpack.optimize.SplitChunksPlugin({
            cacheGroups: { // 这里开始设置缓存的 chunks
                priority: 0, // 缓存组优先级
                vendor: { // key 为entry中定义的 入口名称
                    chunks: "async", // 必须三选一： "initial" | "all" | "async"(默认就是异步)
                    name: ['index','cart','vendor'], // // 要抽取共用模块 chunk 名称
                    minSize: 0,
                    minChunks: 3,
                    maxInitialRequests: 5, // 最大初始化请求书，默认1

                }
            }
        }),
        new webpack.ProvidePlugin({
            $:"jquery",
            jQuery:'jquery',
            'window.jQuery':'jquery'
        }),
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: '[name].css',
            chunkFilename: '[id].css',
        }),
    ],
    // devtool:'#source-map'
};