Webpackは、ブラウザを自動的に開くことができ、熱的に再ロードできる基本的な構成を備えています.

Webpackとは
WebPackはモジュールパッケージング機と見なすことができます.それは、あなたのプロジェクト構造を分析し、JavaScriptモジュールや他のブラウザで直接実行できない拡張言語(Scss、Type Scriptなど)を見つけ、ブラウザーが使用するために適切なフォーマットに変換し、パッケージングすることです.
なぜWebPackを使うのか
1、モジュール化して、複雑なプログラムを小さいファイルに細分化することができます.2、Type ScriptのようなJavaScriptに基づいて開発された開発言語:現在のバージョンのJavaScriptでは直接使用できない特性を実現し、その後JavaScriptファイルに変換してブラウザが認識できるようにする.3、Scss、lessなどのCSSプリプロセッサ4、...
これらの改善は確かに私たちの開発効率を大幅に向上させたが、それらを利用して開発されたファイルはブラウザに認識させるために追加の処理が必要であり、手動処理は非常に煩雑であり、WebPackクラスのツールの出現に需要を提供している.
では、本稿では、Webpackの基本的な構成について説明します(Webpackをインストールする方法と、その使用前の準備作業のネット上で十分に与えられているので、ここでは説明しません).webpack.config.jsは次のように構成されています.

const path = require('path')
const config = require('./config')
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require("html-webpack-plugin")
const CleanWebpackPlugin = require('clean-webpack-plugin')
// const OpenBrowserPlugin = require('open-browser-webpack4-plugin');   //     
const webpack = require('webpack')

function resolve (dir) {
  return path.join(__dirname, '..', dir)   //      。          ，               ，Unix   /，Windows   \。
}

module.exports = {
    // devtool: 'config.dev.devtool',  //  module   eval()   ，      ，      DataUrl   SourceMap（#sourceMappingURL(base64) #sourceURL）。
    mode: 'development',    //          npm start   webpack                  。       ，                 
    //           __dirname nodejs        ，             
    entry: __dirname + '/src/main.js',    //         ，       ，       。
    //        
    output:{
        path: __dirname + '/dist',//       
        // filename:'js/bundle-[chunkhash].js', //               (HMR)   [chunkhash]    。
        filename: 'js/bundle-[hash].js'
    },   //         ， webpack2.X   ，       。
    //  ：    CSS,      ，  
    module: {  //    ，     CSS          。
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                exclude: /node_modules/,
                include: resolve('src'),
                options: {
                    compilerOptions: {   //    
                        preserveWhitespace: false   //         
                    }
                }
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: [resolve('src')]
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader', 'postcss-loader'],   //           webpack          ，    postcss-loader   css-loader，    style-loader。
                // loader: 'style-loader!css-loader!postcss-loader'   //         

                /*               css          ，
                 *       ，   use: ['style-loader', 'css-loader', 'postcss-loader'] loader: 'style-loader!css-loader!postcss-loader'       ，
                 *                 postcss.config.js    ，
                 *                    postcss.config.js    ，
                 *         less sass      “No PostCSS Config found in”   ，
                 *         postcss.config.js    
                */
                // use: [      
                //     'style-loader', 
                //     {
                //         loader: 'css-loader',
                //         options: {importLoaders: 1}
                //     },
                //     {
                //         loader: 'postcss-loader',
                //         options: {
                //             ident: 'postcss',
                //             plugins: [
                //                 require('autoprefixer')({browsers: ['last 5 versions']}), //  CSS    ，      
                //             ]
                //         }
                //     }
                // ],
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']   //    less
            },
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']   //    node-sass，     sass
            },
            {
                test: /\.(eot?.+|svg?.+|ttf?.+|otf?.+|woff?.+|woff2?.+)$/,
                use: 'file-loader?name=assets/[name]-[hash:7].[ext]'
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/i,
                loader: 'url-loader',
                /*    limit ，      limit ，
                 *       dist    assets   （         ），
                 *    hash       ，    limit ，
                 *        base64     。                 
                */
                options:{
                    limit: 10000,
                    name: 'assets/[name]-[hash:7].[ext]'
                }
          },     
        ]
    },
    resolve: {
        extensions: ['.js', '.vue'],
        modules: [
            './',
            path.resolve(__dirname, 'node_modules'),
        ]
    },
    //  ，           
    plugins:[  //    ，               。
        //   hash  ，               ，            ，              clean-webpack-plugin。
        //clean-webpack-plugin      dist      。  ，        /dist   ，        ，           。
        new CleanWebpackPlugin(['dist']),  //           npm start       ，dist       。
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            //filename: "index-[hash].html",
            //filename: "default.html",   //filename       html     ，   template      ，        html  ，             ，      filename。
            template: "index.html",
            //inject: true,   //         ，        true