webpack.config.js文件模板

Webpack 在执行的时候，除了在命令行传入参数，还可以通过指定的配置文件来执行。默认情况下，会搜索当前目录的 webpack.config.js 文件，这个文件是一个 node.js 模块，返回一个 json 格式的配置信息对象，或者通过 --config 选项来指定配置文件。

直接上码:

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");        //提取成单个css文件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');      //压缩css插件
const HtmlWebpackPlugin = require('html-webpack-plugin');       //html文件打包，压缩
const CleanWebpackPlugin = require("clean-webpack-plugin");     //删除原来的打包文件
const copyWebpackPlugin = require("copy-webpack-plugin");     //复制静态文件

module.exports = {
    mode: 'development',
    entry: {        //入口文件
        index: './src/js/index.js',
    },
    output: {       //出口文件
        publicPath: '',     //模板、样式、脚本、图片等资源的路径中统一会加上额外的路径
        path: path.resolve(__dirname, 'dist'),
        filename: './js/[name].[hash:8].js'
    },
    module: {
        rules: [
            {
                test: /\.html$/,
                use: {
                    loader: 'html-loader',
                    options: {

                    }
                }
            },
            {
                test: /\.js$/,
                // exclude: /node_modules/,
                exclude: path.resolve(__dirname, 'node_modules'), //编译时，不需要编译哪些文件
                //include: path.resolve(__dirname, 'src'),//在config中查看 编译时，需要包含哪些文件
                loader: 'babel-loader',
                query: {
                    presets: ['latest'] //按照最新的ES6语法规则去转换
                }
            },
            {
                test: /\.css$/,
                use: [
                    // {loader: "style-loader"},        //在页面内嵌入css
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            // 这里可以指定一个 publicPath
                            // 默认使用 webpackOptions.output中的publicPath
                            publicPath: '../'
                        }
                    },      //单独抽离css
                    {loader: "css-loader"},
                    {       //自动添加前缀
                        loader: "postcss-loader",
                        options: {
                            plugins: [
                                require("autoprefixer")
                            ]
                        }
                    }
                ]
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 100,
                    name: './img/[name].[hash:7].[ext]',
                }
            },
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),       //删除上次打包文件，默认目录'./dist'
        new copyWebpackPlugin([{        //静态资源输出,将src目录下的assets文件夹复制到dist目录下
            from: path.join(__dirname, "./src/assets"),
            to: path.join(__dirname, "./dist/assets"),
        }]),
        new MiniCssExtractPlugin({
            filename: "./css/[name].[hash:8].css"
        }),
        new OptimizeCssAssetsPlugin(),      //压缩css文件
        new HtmlWebpackPlugin({
            favicon: './src/img/favicon.ico',      //图标
            template: './src/index.html',      //指定要打包的html
            filename:'index.html',       //指定输出路径和文件名
            minify: {       //压缩
                removeComments: true,       //移除HTML中的注释
                collapseWhitespace:true,        //删除空白符与换行符
                removeAttributeQuotes: true        //去除属性引用
            }
        }),
        // new HtmlWebpackPlugin(//打包第二个页面
        //     {
        //         template: './app/src/page/index2.html',
        //         filename:'./page/index2.html'
        //     }
        // )
    ]
};