webpack配置一

本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程序須要的每一個模塊，而後將全部這些模塊打包成一個或多個 bundle。

wepack中文文檔

/**
 * Created by zhanghaov on 2018/3/30.
 * 使用webpack,須要在根目錄下配置webpack.config.js
 */

//webpack.config.js 結構
module.exports = {
    entry:{}, //入口文件，指示 webpack 應該使用哪一個模塊，來做爲構建其內部依賴圖的開始
    output:{},//出口，告訴 webpack 在哪裏輸出它所建立的 bundles，以及如何命名這些文件
    module:{},//loader，讓 webpack 可以去處理那些非 JavaScript 文件,css文件,sass、less、es6
    plugins:[],//插件，插件的範圍包括，從打包優化和壓縮，一直到從新定義環境中的變量
    devServer:{}//基於node.js構建本地服務器，瀏覽器監聽，自動刷新顯示修改後的結果（js文件,修改html文件不刷新）
}

先看一個簡單的webpack.config.js配置

/**
 * Created by zhanghaov on 2018/3/24.
 */
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin  = require('html-webpack-plugin');

module.exports = {
    devtool:'eval-source-map',//Source Maps
    entry: "./app/main.js",//入口文件
    output: {
        path: path.resolve(__dirname,'build'),//出口
        filename: "bundle.js"//打包後輸出文件的文件名
    },
    devServer:{
        contentBase:'./public',//頁面目錄
        historyApiFallback:true,//不跳轉
        inline:true //實時刷新
    },
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader:'babel-loader'
                },
                exclude: /node_modules/
            },{
                test:/\.css$/,
                use:[{
                    loader:'style-loader',
                },{
                    loader:'css-loader'
                }]
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin ({ //index.html 模板插件
            template:__dirname + '/app/index.tmpl.html'
        })
    ]
}