webpack 配置

Posted 2020-09-17

var webpack = require(‘webpack‘);
var path = require(‘path‘);
var autoprefixer = require("autoprefixer");
var ExtractTextPlugin = require(‘extract-text-webpack-plugin‘);//css样式从js文件中分离出来,需要通过命令行安装 extract-text-webpack-plugin依赖包
// var htmlWebpackPlugin = require(‘html-webpack-plugin‘);

module.exports = {
    devtool: ‘source-map‘,

    entry: {
        ‘index‘: path.join(__dirname , "src/index.js"),
        ‘page1‘: path.join(__dirname , "src/page1.js"),
        ‘vendor‘: ["jquery"]
    }, //已多次提及的唯一入口文件,可以打包多个文件

    output: {
        path: path.join(__dirname , "dist"), //打包后的文件存放的地方
        filename: "[name].js" //打包后输出文件的文件名
    },

    // externals: {
    //     jquery: ‘jQuery‘
    // },

    module: {
        rules: [
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader!postcss-loader",
                    publicPath: "../" //css图片路径出错
                })
            },
            {
                test: /\.(png|jpg)$/,
                loader: ‘url-loader?limit=8192&name=./images/[hash:8].[name].[ext]‘
            },
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                loader: "babel-loader"
            },
            {
                test: /\.json$/,
                loader: "json-loader"
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: "./css/[name].css",
            allChunks: true
        }),

        require(‘autoprefixer‘),

        new webpack.optimize.CommonsChunkPlugin({
            name: [‘vendor‘] // 指定公共 bundle 的名字。
        }),

        // new HtmlWebpackPlugin({
        //     filename: "./public/index.html",
        //     template: "./html/moban.html",
        //     inject: true,
        //     hash: true,
        //     // minify:
        // }),
        
        // new webpack.optimize.UglifyJsPlugin({
     //      compress: {
     //        warnings: false
     //      }
     //    }),
    ]
}