webpack3.0配置項模版參考

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
    entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
    output: {
        path: __dirname + "/build",//打包後的文件存放的地方
        filename: "bundle-[hash].js"//打包後輸出文件的文件名
    },
    devtool: 'none',//便於調試生成source map
    devServer: {
        //需要配置package.json中"scripts": {
        // "test": "echo \"Error: no test specified\" && exit 1",
        // "start": "webpack",//配置後可用npm start打包webpack
        // "server": "webpack-dev-server --open"//開啓本地服務器
        // },
        contentBase: "./public",//本地服務器所加載的頁面所在的目錄
        historyApiFallback: true,//不跳轉
        inline: true,//實時刷新
        hot: true//react熱加載，實時查看改變
        //port:8081//默認8080
    },
    module: {//配置babel轉化ES6
        rules: [
            {
                test: /(\.jsx|\.js)$/,//一個用以匹配loaders所處理文件的拓展名的正則表達式（必須）
                use: {
                    loader: "babel-loader"//loader的名稱（必須）
                    // options: {
                    //     presets: [
                    //         "es2015", "react"
                    //     ]
                    // }//在.babelrc中配置webpack會自動調用
                },
                exclude: /node_modules///include/exclude:手動添加必須處理的文件（文件夾）或屏蔽不需要處理的文件（文件夾）（可選）；
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader",
                        options: {//解決不同的模塊中使用相同的類名造成衝突,解決css中class名的污染
                            modules: true
                        }
                    },
                    {
                        loader: "postcss-loader"
                    }
                ]


            },
            {
                test: /\.less$/,
                use:[
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader",
                        options: {//解決不同的模塊中使用相同的類名造成衝突,解決css中class名的污染
                            modules: true
                        }
                    },
                    {
                        loader: "postcss-loader"
                    },
                    {
                        loader: "less-loader"
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin('版權所有，翻版必究'),
        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html"//指定html模版
        }),
        new webpack.optimize.OccurrenceOrderPlugin(),//爲組件分配ID，通過這個插件webpack可以分析和優先考慮使用最多的模塊，併爲它們分配最小的ID
        new webpack.optimize.UglifyJsPlugin(),//壓縮js代碼
        new ExtractTextPlugin("style.css")//分離css和js文件
    ],
};