webpack configuration one

Essentially, webpack is a static module bundler for  modern JavaScript applications . When webpack processes an application, it recursively builds a dependency graph that contains every module the application needs, and then packages all those modules into one or more  bundles .

wepack Chinese documentation

/**
 * Created by zhanghaov on 2018/3/30.
 * To use webpack, you need to configure webpack.config.js in the root directory
 */

//webpack.config.js structure
module.exports = {
    entry:{}, //entry file, indicating which module webpack should use as the start of building its internal dependency graph
    output:{},//Export, tells webpack where to output the bundles it creates, and how to name these files
    module:{},//loader, allows webpack to process those non-JavaScript files, css files, sass, less, es6
    plugins:[],//Plugins, the range of plugins includes, from packaging optimization and compression, to redefining variables in the environment
    devServer:{}//Build a local server based on node.js, monitor the browser, automatically refresh and display the modified results (js files, modify html files without refreshing)
}

First look at a simple webpack.config.js configuration

/**
 * 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",//entry file
    output: {
        path: path.resolve(__dirname,'build'),//出口
        filename: "bundle.js"//The file name of the output file after packaging
    },
    devServer:
        contentBase:'./public',//page directory
        historyApiFallback:true,//Do not jump
        inline:true //Refresh in real time
    },
    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 plugin
            template:__dirname + '/app/index.tmpl.html'
        })
    ]
}