【01】webpack 4クイックハンド

18286 ワード

本文は初心者が素早くwebpack 4に適して、応用だけを話して、比較的に浅いです.
Webpackの旅を始める
一、簡易配置
1、初期化項目
　　npm init

//packge.json  
"scripts": {    
    "build": "webpack  --profile --progress --colors --display-error-details",    
    "dev": "webpack  --display-modules --profile --progress --colors --display-error-details"  
}, 
//color  ， ： 
//profile  ， 
//progress  ， 
//display-modules   node_modules  ， 
//display-error-details

2、webpackのインストール
グローバルインストール:npm install webpack-gローカルインストール:npm install webpack webpack-cli-D
3、webpackコア概念
Entry:エントリ、Webpackが構築を実行する最初のステップはEntryから始まり、入力に抽象化できます.Module:モジュール、Webpackではすべてモジュールで、1つのモジュールは1つのファイルに対応しています.Chunk:コードブロックで、1つのChunkは複数のモジュールから組み合わせられ、コードのマージと分割に使用されます.Loader:モジュールの元のコンテンツを必要に応じて新しいコンテンツに変換するためのモジュール変換器.Plugin:拡張プラグイン、Webpack構築プロセスの特定のタイミングで拡張ロジックを注入して構築結果を変更したり、あなたが望むことをしたりします.Output:結果を出力し、Webpackで一連の処理を経て最終的に所望のコードを得た後に結果を出力します.
4、webpackを配置する.config.js

let path = require('path');//node 
module.exports = {
    entry:'./src/index.js',// 
    output:{
        filename:'build.js',// 
        //  
        path: path.resolve('./dist')
    }, 
    devServer:{},//  
    module:{}, //  
    plugins:[], //  
    mode:'development', //  
    resolve:{}, //  
}

ここでコマンドnpm run devまたはnpm run buildを使用してjsファイルをパッケージ化します.
二、開発サーバーの配置
　　npm i webpack-dev-server –D

//webpack.config.js
devServer:{
    contentBase:path.resolve(__dirname,'dist'),//  
    host:'localhost',//  
    compress:true,   //  gzip 
    port:8080,       //  
    open:true         //  
}

//package.json
"scripts": {
    "dev": "webpack-dev-server --open --mode development "
}
//  npm run dev
//--mode development   --mode production

三、moduleの構成
test:処理ファイルの拡張子に一致する正規表現
use:loader名は、モジュールを使用する名前です.
include/exclude:処理するフォルダを手動で指定するか、処理しないフォルダをマスクします.
Query:loadersに追加の設定オプションを提供
1、cssファイルのロードをサポートする
　　npm install style-loader css-loader -D

module: {
    rules:[
       {
            test:/\.css$/,
            use:['style-loader','css-loader'],
            include:path.join(__dirname,'./src'),
            exclude:/node_modules/
       }        
    ]
}
// ： 。 css-loader style-loader css Head 。

2、サポート画像
　　npm install file-loader url-loader html-withimg-loader -D

module: {
    rules:[ 
       {
            test: /\.(png|jpg|gif|svg|bmp|eot|woff|woff2|ttf)$/,
            loader: {
                loader: 'url-loader',
                options: {
                    limit: 5 * 1024,//   > limit  file-loader,  url-loader
                    outputPath: 'images/'//  
                }
            }
        }
    ]
}

//usage -  ：
let logo = require('./images/logo.png');
let img = new Image();
img.src = logo;
document.body.appendChild(img);

//usage -  CSS 
.img-bg{
    background: url(./images/logo.png);
    width:173px;
    height:66px;
}

//usage -  HTML 
{
    test:/\.(html|html)$/,
    use:'html-withimg-loader',
    include:path.join(__dirname,'./src'),
    exclude:/node_modules/
}

3、lessとsassのコンパイル
　　npm install less less-loader node-sass sass-loader -D

// head 
module: {
    rules:[ 
        {
            test: /\.css$/,
            loader: ['style-loader', 'css-loader']
        }, {
            test: /\.less$/,
            loader: ['style-loader', 'css-loader']
        }, {
            test: /\.scss$/,
            loader: ['style-loader', 'css-loader']
        }
    ]
}

4、css 3属性接頭辞の処理
　　npm install postcss-loader autoprefixer -D

//postcss.config.js  
module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

//  post-laoder push  css loader 
module: {
    rules:[ 
        {
            test: /\.css$/,
            loader: ['style-loader', 'css-loader', 'postcss-loader']
        }, {
            test: /\.less$/,
            loader: ['style-loader', 'css-loader', 'less-loader']
        }, {
            test: /\.scss$/,
            loader: ['style-loader', 'css-loader', 'sass-loader']
        }
    ]
}

5、エスケープES 6/ES 7/JSX
　　npm i babel-core babel-loader babel-preset-env babel-preset-stage-0 babel-preset-react -D

//  .babelrc  
{
    "presets": ["@babel/preset-env"],
    "plugins": [
        [
            "@babel/plugin-transform-runtime",
            {
                "corejs": 3
            }
        ]
    ]
}

module: {
    rules:[ 
        {
            test:/\.jsx?$/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ["env","stage-0","react"]// env --> es6, stage-0 --> es7, react --> react
                }
            },
            include:path.join(__dirname,'./src'),
            exclude:/node_modules/
        }
    ]
}

四、pluginsの構成
1、自動産出html
　　npm install html-webpack-plugin -D

const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
    new HtmlWebpackPlugin({
        template: './src/index.html',   //  
        filename: 'base.html',          //  
        chunks: ['common', 'base'],     //  HTML 
        hash: true,                     //  
        title: 'base',                  //  ， html  htmlWebpackPlugin.options.title  
        minify: {                       //  html 
            removeAttributeQuotes: true //  
        }
    })
]

2、分離css
　　npm install extract-text-webpack-plugin@next -D

// 
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
let cssExtract = new ExtractTextWebpackPlugin('css.css');
let lessExtract = new ExtractTextWebpackPlugin('less.css');
let sassExtract = new ExtractTextWebpackPlugin('sass.css');

module: {
    rules: [
         {
            test: /\.css$/,
            loader: cssExtract.extract({
                use: ['css-loader?minimize']
            })
        }, {
            test: /\.less$/,
            loader: lessExtract.extract({
                use: ['css-loader?minimize', 'less-loader']
            })
        }, {
            test: /\.scss$/,
            loader: sassExtract.extract({
                use: ['css-loader?minimize', 'sass-loader']
            })
        }
    ]
},
plugins: [
    cssExtract,
    lessExtract,
    sassExtract
]

// 
const PUBLIC_PATH='/';
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath:PUBLIC_PATH
}

3、静的ファイルのコピー(プロジェクトに参照されていないファイルもターゲットディレクトリにパッケージ化する必要がある場合がある)
　　npm install copy-webpack-plugin -D

const CopyWebpackPlugin = require('copy-webpack-plugin');

plugins: [
    new CopyWebpackPlugin([{
        from: path.join(__dirname, 'public'),       //  
        to: path.join(__dirname, 'dist', 'public')  //  
    }])
]

4、梱包前に出力ディレクトリを空にする
　　npm install clean-webpack-plugin -D

const CleanWebpackPlugin = require('clean-webpack-plugin');

plugins: [
    new CleanWebpackPlugin([path.join(__dirname, 'dist')])
]

5、圧縮JS
　　npm install uglifyjs-webpack-plugin -D

const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');

plugins: [
    new UglifyjsWebpackPlugin()
]

五、サーバーエージェント

//  /api/users   http://localhost:9000/api/users。
devServer: {
    proxy: {
        "/api": "http://localhost:9000",
    }
}

// '/api'
devServer: {
    proxy: {
        '/api': {
            target: 'http://localhost:4000',
            pathRewrite: {
                '/api': ''
            }
        }
    }
}

六、relove解析
1、extensions

// extension require import , 
resolve: {
    // ， , 
   extensions: ["",".js",".css",".json"],
},

2、 alias

// webpack 
// jquery ， jqueryPath, node_modules 
// webpack jquery.js 
const bootstrap = path.join(__dirname,'node_modules/bootstrap/dist/css/bootstrap.css');
resolve: {
    alias: {
        'bootstrap': bootstrap
    }
}

七、マルチエントリファイル

// HTML ， ， 
//  ， html 
entry: {
    index: './src/index.js',
    main:'./src/main.js'
},
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[hash].js',
    publicPath:PUBLIC_PATH
},

plugins: [
    new HtmlWebpackPlugin({
        minify: {
            removeAttributeQuotes:true
        },
        hash: true,
        template: './src/index.html',
        chunks:['index'],
        filename:'index.html'
    }),
    new HtmlWebpackPlugin({
        minify: {
            removeAttributeQuotes:true
        },
        hash: true,
        chunks:['login'],
        template: './src/login.html',
        filename:'login.html'
    })]
]

Webpack-dev-serverのコマンドパラメータ

[Programmers][Java]キーボードを押す