webpack 4学習ノート

webpack 4学習ノートDell Lee先生の授業によって整理します.
webpackの取り付けと入り口の配置
おバカ様のインストールnode-v検査が成功しましたか?グローバルインストールwebpack:npm install webpack webpack webpack-cli-g
全体的にインストールしない方がいいです.そうでないと、複数のプロジェクトは互換性がありません.
プロジェクト内のインストール:npm install webpack webpack-cli -Dプロジェクト内のwebpackバージョンコードnpx webpack -v npxは現在のプロジェクトディレクトリの下のnode_になります.modulesはnpmの代わりにwebpacknpxを探してプロジェクト内でインストールして使用します.
インストール可能なすべてのバージョンnpm info webpackを表示します.
具体的なバージョンwebpackをインストールします.npm install @xxxx

//      
const path = require('path')

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        //__dirname         ，                   
        path: path.resolve(__dirname.
            'bundle')
    }
}

萼菘packageにおけるスクリプトの配置

"script":{
"bundle":"webpack"
}
}
//    npm run bundle     

webpack-cliの役割:webpackの命令は命令行で有効になります.

//      
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlungin = require('clean-webpack-plugin')
const webpack = require('webpack')
module.exports = {
    //development        production     
    mode: 'development'
    /*sourcemap        ，     js      ，          dev         
    sourcemap      
    inline：map     js ，     ，   sourcemap        map  
    cheap：            ，      ，   module     
    module：             
    eval：  eval         ，      ，    。            
            ：cheap-module-eval-source-map
        bug    ：cheap-module-source-map
                source-map
    */
    devtool: 'source-map'
    devServer： {
        //dev          
        contentBase: './dist'
        //           
        open: true
        //    ，    React，Vue   webpack      ，   webpack     
        proxy: {
            '/api': 'www.baidu.com'
        }
        //     
        //React Vue               ，                 modeule.hot           
        hot: true,
        hotOnly: true
    }
    entry: {
        main: './src/index.js',
    }
    output: {
        //                 cdn  
        // publicPath: 'http://cdn.com.cn'
        //name   ，              
        filename: '[name].js',
        //__dirname         ，                   
        path: path.resolve(__dirname.
            'dist')
    }
    module: {
        rules: [{
                test: '/\.js$/',
                exclcude: /node_modules/,
                // babel-loader     webpack babel   ，       @babel/preset-env   
                //           ES6  ，    Promise，               polyfill（  ）   
                loader: "babel-loader",
                //options              .babelrc      
                options: {
                    //      ，          ，   transform-runtime   ，  prest-env+                
                    /*"plugins":[["@babel/plugin-transform-runtime",{
                        "corejs":2,
                        "helpers":true,
                        "regenerator":true,
                        "useESModules":false
                   }]]
                   */
                    presets: [
                        //  es6  
                        "@babel/preset-env", {
                            //       
                            useBuiltIns: 'usage'
                            //       ，      
                            targets: {
                                chrome: "67"
                            }
                        },
                        //  react  
                        "@babel/preset-react"
                    ]
                }
            },

            {
                test: /\.(jpg|png|gif)$/,
                use: {
                    /*url-loader         
                url-loader      base64           
                  ：        
                  ：       js        
                  :     url-loader，    file-loader
                */
                    loader: 'file-loader',
                    options: {
                        //placeholder     => ext：     hash：      hash 
                        name: '[name].[ext]',
                        //       dist/images
                        outputPath: 'images/'
                        //    20480（20k）   url-loader，  20kb        
                        limit： 204800
                    }


                }
            },
            /*
        style-loader:         html head 
        css-loader: css               css  
        sass-loader: sass     css，less-loader  ，         
        postcss-loader：      postcss.config.js  ，       css         
        postcss.config.js

        module.exports={
            plugins:[
            //autoprefixer:        
             require('autoprefixer')
        ]
        }
        */
            // use: ['style-loader', 'css-loader','sass-loader','postcss-loader']
            {
                test: /\.css$/,
                use: [
                    'style-loader', {
                        loader: 'css-loader',
                        options: {
                            //              loader
                            importLoaders: 2，
                            //  css     ，       import './styles.scss'  import styels from './styles.scss'
                            modules： true
                        },
                        'sass-loader',
                        'postcss-loader'
                    }
                ]
            }, {
                //        ，iconfont      
                test: /\.(eot|ttf|svg)$/,
                use: {
                    loader: 'file-loader'
                }
            }

        ]
    },

    plugins: [
        new HtmlWebpackPlugin({
            //           html         js    html 
            //      html   
            template: './src/idnex.html'
        }),
        //                 
        new CleanWebpackPlungin([
            'dist'
        ]),
        new webpack.HotModuleReplacementPlugin()
    ],
      /*        tree-shaking  ，       shaking      package.json    
     sideEffects              
         eg：
         {
               “sideEffects”:["@babel/pollu-fill"]
          }
               */
optimization{
  usedEsxports:true
}

}

全体の配置ファイルは、tree-sharkingやsourcemapなどの生産環境と開発環境において異なる配置が必要な配置項目があります.実際の開発ではwebpack-mergeを使って、すべての構成ファイルをwebpack-comon-config.jsweb pack-dev-config.jsweb pack-prod-config.jsに分けて、merg.jsを結合してからコードを減らすことができます.
文章は個人の記録に用いられ,誤りがあったら指摘してください.