webpack配置

快来打我* 2022-05-11 09:30 185阅读 0赞

var path = require(‘path’);  
var MiniTextPlugin = require(‘mini-css-extract-plugin’);  
var uglifyjs = require(‘uglifyjs-webpack-plugin’);  
var HtmlWebpackPlugin = require(‘html-webpack-plugin’);

module.exports = \{  
entry: ‘./src/main.js’,  
output: \{  
filename: ‘bundle.js’,  
path: path.resolve(\_\_dirname, ‘dist’),  
// publicPath: ‘[http://localhost:8080][http_localhost_8080]’,  
\},  
module: \{  
rules: \[  
\{  
test: /.lessKaTeX parse error: Expected 'EOF', got '\}' at position 83: …'\] \}̲, \{…/,  
use: \[‘style-loader’, ‘css-loader’\]  
\},  
// js loaders  
\{  
test: /.jsKaTeX parse error: Expected 'EOF', got '\}' at position 219: …s/ \}̲, /…/,  
use: \[  
\{  
loader: ‘file-loader’,  
options: \{  
name: “\[name\].html”  
\}  
\},  
\{  
loader: “extract-loader”  
\},  
\{  
loader: “html-loader”,  
options: \{  
attrs: \[“img:src”\]  
\}  
\}

]
            },
            // img-loader
            {
                test: /\.(jpg|png|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: 'img/[name]-[hash:8].[ext]'
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        // 单独打包css
        new MiniTextPlugin({
            // 从.js文件中提取出来的.css文件名称
            filename: '[name]_[contenthash:8].css',
            // chunkFilename:'[id].css'
        }),
        // 压缩css
        new uglifyjs(),
        new HtmlWebpackPlugin({
            title: 'tittle',
            template: './src/demo.html',
            // minify: {
            //     collapseWhitespace: true
            // },
            // hash: true
        })
    ],
    mode: 'development'

[http_localhost_8080]: http://localhost:8080