Webpackの基本的な使用とそのインストールパッケージ

1.webpackの基本使用
A.プロジェクトディレクトリを作成して初期化する

    ，            ，    ：
    npm init -y

B.トップページ及びjsファイルの作成

        index.html  ，        ：        ul，ul      li
        js   ，        index.js  

C.jQueryのインストール

        ，    :
npm install jQuery -S

D.jQueryのインポート

  index.js  ，      jQuery     ：
import $ from "jquery";
$(function(){
    $("li:odd").css("background","cyan");
    $("li:odd").css("background","pink");
})

注意:import$from「jquery」のため、プロジェクトの実行中にエラーが発生します.このコードはES 6の新しい構文コードに属し、ブラウザで互換性の問題がある可能性があるので、この問題を解決するためにwebpackが必要です.
E.webpackのインストール

1).        ，    :
npm install webpack webpack-cli -D
2).         ，     webpack.config.js          webpack
  webpack.config.js          webpack  ，  ：
module.exports = {
    mode:"development"//     development(    )，production(    )
}
  ：mode           。
     development           ，         ，        
     production             ，        ，        
3).      package.json        dev，  ：
"scripts":{
    "dev":"webpack"
}
  ：scripts      ，     npm run   ， ：
      ：npm run dev
    webpack      
4).  dev        ，              js  
        ，    :
npm run dev
  webpack      ，     dist      main.js  ，     html   。
        。

2.webpackのパッケージ入口/出口の設定

 webpack 4.x ，    src/index.js          js  
                     dist/main.js          js  
           /  js  ，         webpack.config.js      /   js  ，  ：
const path = require("path");
module.exports = {
    mode:"development",
    //        
    entry: path.join(__dirname,"./src/xx.js"),
    //      
    output:{
        //    
        path:path.join(__dirname,"./dist"),
        //     
        filename:"res.js"
    }
}

3.webpackの自動パッケージの設定

     ，      js     ，          webpack，       js  
              ，           ，  ，               。
             ：
    A.          :webpack-dev-server
        npm install webpack-dev-server -D
    B.  package.json  dev    ：
        "scripts":{
            "dev":"webpack-dev-server"
        }
    C.    js       ：
    D.  npm run dev，    
    E.        ：http://localhost:8080
​
  ：webpack-dev-server         ，             .

: パッケージが すると、デフォルトでサーバのWebページが き、packageを くことが します.jsonファイル、devコマンドを するには:

"dev": "webpack-dev-server --open --host 127.0.0.1 --port 9999"

4.html-webpack-pluginの

  html-webpack-plugin           。
           http://localhost:8080/   ，            ，         
                ，                ，            。
               ：
    A.          :html-webpack-plugin
        npm install html-webpack-plugin -D
    B.  webpack.config.js  ，  ：
        //   
        const HtmlWebpackPlugin = require("html-webpack-plugin");
        //    
        const htmlPlugin = new HtmlWebpackPlugin({
            //             
            template:"./src/index.html",
            //           
            filename:"index.html"
        })
    C.    webpack.config.js  ，  plugins  ：
        module.exports = {
            ......
            plugins:[ htmlPlugin ]
        }

5.webpackのローダ

  loader   js  ：     ，webpack    js  ，       js  ，    loader       
    loader     ：
        1).less-loader
        2).sass-loader
        3).url-loader:    css  url       
        4).babel-loader:    js      
        5).postcss-loader
        6).css-loader,style-loader
​
  ：    loader        ，   loader            
​
A.  style-loader,css-loader       
    1).   
        npm install style-loader css-loader -D
    2).    ：  webpack.config.js module  rules  
    module.exports = {
        ......
        plugins:[ htmlPlugin ],
        module : {
            rules:[
                {
                    //test           ，    
                    test:/\.css$/,
                    //use            loader
                    use:['style-loader','css-loader']
                }
            ]
        }
    }
B.  less,less-loader  less  
    1).   
        npm install less-loader less -D
    2).    ：  webpack.config.js module  rules  
    module.exports = {
        ......
        plugins:[ htmlPlugin ],
        module : {
            rules:[
                {
                    //test           ，    
                    test:/\.css$/,
                    //use            loader
                    use:['style-loader','css-loader']
                },
                {
                    test:/\.less$/,
                    use:['style-loader','css-loader','less-loader']
                }
            ]
        }
    }
C.  sass-loader,node-sass  less  
    1).   
        npm install sass-loader node-sass -D
    2).    ：  webpack.config.js module  rules  
    module.exports = {
        ......
        plugins:[ htmlPlugin ],
        module : {
            rules:[
                {
                    //test           ，    
                    test:/\.css$/,
                    //use            loader
                    use:['style-loader','css-loader']
                },
                {
                    test:/\.less$/,
                    use:['style-loader','css-loader','less-loader']
                },
                {
                    test:/\.scss$/,
                    use:['style-loader','css-loader','sass-loader']
                }
            ]
        }
    }
​
      ：  sass-loader   ，            ，    ：
    https://segmentfault.com/a/1190000010984731?utm_source=tag-newest
​
D.  post-css    css      （-ie-,-webkit-）
1).   
    npm install postcss-loader autoprefixer -D
2).           postcss.config.js  
const autoprefixer = require("autoprefixer");
module.exports = {
    plugins:[ autoprefixer ]
}
3).    ：  webpack.config.js module  rules  
module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                //test           ，    
                test:/\.css$/,
                //use            loader
                use:['style-loader','css-loader','postcss-loader']
            },
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                test:/\.scss$/,
                use:['style-loader','css-loader','sass-loader']
            }
        ]
    }
}
​
E.               
    css                  ，    loader    
  url-loader file-loader               
1).   
    npm install url-loader file-loader -D
2).    ：  webpack.config.js module  rules  
module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                //test           ，    
                test:/\.css$/,
                //use            loader
                use:['style-loader','css-loader']
            },
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                test:/\.scss$/,
                use:['style-loader','css-loader','sass-loader']
            },{
                test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                //limit       ，    limit    ，    
                // base64  
                use:"url-loader?limit=16940"
            }
        ]
    }
}
​
F.  js        ：   js   ，            js  
               ，             js  
      babel    
A.  babel   
    npm install babel-loader @babel/core @babel/runtime -D
B.  babel     
    npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
C.           babel.config.js  
    
    module.exports = {
        presets:["@babel/preset-env"],
        plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ]
    }
D.    ：  webpack.config.js module  rules  
module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                //test           ，    
                test:/\.css$/,
                //use            loader
                use:['style-loader','css-loader']
            },
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                test:/\.scss$/,
                use:['style-loader','css-loader','sass-loader']
            },{
                test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                //limit       ，    limit    ，    
                // base64  
                use:"url-loader?limit=16940"
            },{
                test:/\.js$/,
                use:"babel-loader",
                //exclude    ，       node_modules  js  
                exclude:/node_modules/
            }
        ]
    }
}