前言:

Webpack 4が出てから、いくつかのプラグインが大きく変化し、以前のバージョンとは使用方法が異なり、初心者が穴に入った.本編では、最初からWebpack 4の開発バージョンを構成し、css、jsをコンパイルしてパッケージ化し、md 5、CSSの画像処理を生成し、jsがhtmlページに自動的に注ぎ込み、指定ファイルを削除し、ホット更新する方法を紹介する.

インストール

//     
npm install -g webpack webpack-cli    

ターゲットフォルダを新規作成して初期化

shift+マウス右クリック選択ここでコマンドウィンドウを開く

//     
mkdir demo
//  demo
cd demo
//   
npm init -y

フォルダscriptsを作成し、scriptsにindexを新規作成します。js

//           
function fn()
{
    alert("webpack4.0")
};
fn();

Webpackを作成します。config.jsとscriptsフォルダは同じディレクトリにあります

const path=require("path")
module.exports={
    entry:{
        index:"./scripts/index.js"     //    ,    webpack4     src    index.js
    },
    output:{
        filename:'[name].bundle.[hash].js',    //     ,[name]      js   [hash]        hash 
        path:path.join(__dirname,'dist')       //      
    }
}

Webpack--mode developmentを実行するとdist/indexが生成されます。bundle.xxx.js

srcフォルダを作成しindexを新規作成します。html、distのjsファイルを導入

    
    


           ?

  -->

ブラウザを開くと、設定されたjsファイルが有効になります.
srcフォルダにa.css a.js c.jsをそれぞれ作成し、indexを変更します.js、それぞれ:
a.css

body{
    background-image: url('../scripts/Koala.jpg');
    /* background-color: aquamarine; */
}

a.js

import c from './c.js';
const data={
    init(){
        alert("I'm a little coder")
    },
    cinit(){
        c.init()
    }
}
export default data;

c.js

const data={
    init(){
        document.write("Hello World")
    }
}
export default data;

index.js

import a from '../src/a.js'
import c from '../src/c.js'

function fn()
{
    alert("webpack4.0")
    a.init()
    c.init()
};
fn();

Webpackを構成します.config.jsファイル

const path=require("path")
module.exports={
    entry:{
        index:"./scripts/index.js"     //    ,    webpack4     src    index.js
    },
    output:{
        filename:'[name].bundle.[hash].js',    //     ,[name]      js   [hash]        hash 
        path:path.join(__dirname,'dist')       //      
    },
    module:{  //       
        rules:[   
            {
                test:/\.css$/,
                use:['style-loader','css-loader']     //  css
            }
         ]
    }
}

style-loader,css-loaderのインストール

npm install style-loader css-loader --save-dev

webpack --mode developmentを実行するとmd 5値jsファイルが表示され、htmlに導入されます.

CSSにおけるピクチャ処理

url-loader,file-loaderのインストール

npm install url-loader file-loader --save-dev

Webpackを構成します。config.jsファイル

const path=require("path")
module.exports={
    entry:{
        index:"./scripts/index.js"     //    ,    webpack4     src    index.js
    },
    output:{
        filename:'[name].bundle.[hash].js',    //     ,[name]      js   [hash]        hash 
        path:path.join(__dirname,'dist')       //      
    },
    module:{  //       
        rules:[   
            {
                test:/\.css$/,
                use:['style-loader','css-loader']     //  css
            },
            {
                test:/\.(png|jpg|gif)$/,
                use:[{
                    loader:'url-loader',
                    options:{
                        outputPath:'images/',      //   images   
                        limit:999999               //    999999B     Base64   ，  JS
                    }
                }]
            }
        ]
    }
}

webpack --mode developmentを実行すると、distのimagesフォルダに画像が表示され、indexが開きます.html

js自動htmlファイル注入

プラグインhtml-webpack-pluginを使用すると、生成されたjsをhtmlページに自動的に導入でき、手動で追加する必要はありません。

プラグインclean-webpack-pluginを使用して、指定したファイルを削除し、より多くの構成、clean-webpack-pluginを表示します.

//   html-webpack-plugin
npm install html-webpack-plugin --save-dev
//   webpack webpack-cli
npm install webpack webpack-cli --save-dev
/ /  clean-webpack-plugin
npm install clean-webpack-plugin --save-dev

Webpackを構成します。config.jsファイル

const path=require("path");
const HtmlWebpackPlugin=require('html-webpack-plugin')//  html-webpack-plugin       js    html  
const CleanWebpackPlugin=require('clean-webpack-plugin')//          
const webpack=require('webpack')
module.exports={
    entry:{
        index:"./scripts/index.js"     //    ,    webpack4     src    index.js
    },
    output:{
        filename:'[name].bundle.[hash].js',    //     ,[name]      js   [hash]        hash 
        path:path.join(__dirname,'dist')       //      
    },
    module:{  //       
        rules:[   
            {
                test:/\.css$/,
                use:['style-loader','css-loader']     //  css
            },
            {
                test:/\.(png|jpg|gif)$/,
                use:[{
                    loader:'url-loader',
                    options:{
                        outputPath:'images/',      //   images   
                        limit:999999               //    999999B     Base64   ，  JS
                    }
                }]
            }
        ]
    },
    plugins:[ //     
        new HtmlWebpackPlugin({//  
           filename:'index.html',//     
           template:'./src/index.html',   //       index.html       dist/index.html  
        }),
        new CleanWebpackPlugin(),  //webpack 4 +          output dist    
    ]
}

webpack --mode development，を実行するたびに、distディレクトリが削除され、以前のjsファイルが削除された新しいdistが生成されるのが見えます.

ホット・アップデート、自動リフレッシュ

webpack-dev-servewebpack-dev-serverは、Node.jsとwebpackに基づく小型サーバであり、強力な自動リフレッシュと熱交換機能を備えています.
取付webpack-dev-serve

npm install webpack-dev-serve --save-dev

Webpackを構成します。config.jsファイル

const path=require("path");
const HtmlWebpackPlugin=require('html-webpack-plugin')//  html-webpack-plugin       js    html  
const CleanWebpackPlugin=require('clean-webpack-plugin')//          
const webpack=require('webpack')
module.exports={
    entry:{
        index:"./scripts/index.js"     //    ,    webpack4     src    index.js
    },
    output:{
        filename:'[name].bundle.[hash].js',    //     ,[name]      js   [hash]        hash 
        path:path.join(__dirname,'dist')       //      
    },
    module:{  //       
        rules:[   
            {
                test:/\.css$/,
                use:['style-loader','css-loader']     //  css
            },
            {
                test:/\.(png|jpg|gif)$/,
                use:[{
                    loader:'url-loader',
                    options:{
                        outputPath:'images/',      //   images   
                        limit:999999               //    999999B     Base64   ，  JS
                    }
                }]
            }
        ]
    },
    plugins:[ //     
        new HtmlWebpackPlugin({//  
           filename:'index.html',//     
           template:'./src/index.html',   //       index.html       dist/index.html  
        }),
        new CleanWebpackPlugin(),  //webpack 4 +          output dist    
    ],
    devServer:{//          ，           
        inline:true,  //       websocket   
        hot:true,//   
        contentBase:path.resolve(__dirname,'dist'),//             
        host:'localhost',//    
        port:9090,//   
        compress:true//         gzip   
    }
}

パッケージを構成します。json

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --mode development"
  },

実行npm run dev アクセスhttp://localhost:9090/