Webpack学習ノート-plugins

pluginsが来た~pluginsはloaderでは解決できないことを解決するため~plugins:Arrayプラグインはパラメータ/オプションを携帯でき、config構成ではpluginsにnewインスタンスを転送する.以下に、よく使われるplugin~をいくつか挙げます.
1.html-webpack-plugin:htmlエントリファイルこのプラグインには主に2つの用途がある:1).htmlファイルに外部リソースを導入し、生成したjs、cssなどをパッケージ化し、構築するたびに自分で手動で修正する必要はありません.2). 作成htmlファイルを生成し、1つのhtmlファイルが1つのエントリに対応し、N個のhtml-webpack-pluginを構成してN個のエントリを生成することもできる~関数によって一括生成することもできる~

// html  
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    plugins: [
        //       
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'src/index.html'),
            filename: 'search.html',
            //   chunk,             
            chunks: ['search'],
            //     chunk    
            inject: true,
            minify: {
                html5: true,
                //         ， preserveLineBreaks    true，       
                collapseWhitespace: true,
                preserveLineBreaks: false,
                minifyCSS: true,
                minifyJS: true,
                removeComments: false
            }
        })
    ]
};

以上は単一のエントリの構成ですが、複数のエントリを構成する必要がありますか?複数を順次追加したり、関数によって生成したりすることができ、マルチファイルエントリのようなやり方は、前のentry編で述べたように、今回は前の関数に基づいて拡張します~

const setMPA = () => {
    const entry = {};
    const htmlWebpackPlugins = [];

    const entryFiles = glob.sync(path.join(__dirname, './src/*/index.js'));
    Object.keys(entryFiles).map(index => {
        const entryFile = entryFiles[index];
        const match = entryFile.match(/src\/(.*)\/index\.js/);
        const pageName = match && match[1];
        entry[pageName] = entryFile;
        const htmlWebpackPlugin = new HtmlWebpackPlugin({
            template: path.join(__dirname, `src/${pageName}/index.html`),
            filename: `${pageName}.html`,
            //   chunk
            chunks: [pageName],
            //     chunk    
            inject: true,
            minify: {
                html5: true,
                //         ， preserveLineBreaks    true，       
                collapseWhitespace: true,
                preserveLineBreaks: false,
                minifyCSS: true,
                minifyJS: true,
                removeComments: false
            }
        });
        htmlWebpackPlugins.push(htmlWebpackPlugin);
    });
    return {
        entry,
        htmlWebpackPlugins
    };
};

const {entry, htmlWebpackPlugins} = setMPA();

//    plugins       
module.exports = {
    plugins: [].concat(htmlWebpackPlugins)
};

2.optimize-css-assets-webpack-plugin:圧縮CSSはcssnanoと協力して使用し、CSSに対して多方面の最適化を行い、最終的に生成したファイル体積が最小であることを保証する.

// css  
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

plugins: [
    new OptimizeCSSAssetsPlugin({
        assetNameRegExp: /\.css$/g,
        cssProcessor: require('cssnano')
    })
]

3.mini-css-extract-plugin:CSSを個別ファイルとして抽出

//  CSS       
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports ={
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name]_[contenthash:8].css'
        })
    ]  
};

使用時にはloaderと組み合わせて使用する必要があり、CSSを解析する際にはまずCSS-loaderで解析を行い、その後MiniCssExtractPluginを通過する.loader CSSを別のファイルに抽出~サービス側でレンダリングするには推奨~
4.clean-webpack-plugin:構築物を整理するパッケージごとにdistフォルダが生成され、構築を実行するまで削除しないとdistディレクトリがますます大きくなる~という要求を解決するには、2つの方法がある:1).packageでjsonでの構成コマンド

// package.json
"scripts": {
    "build": "rm -rf ./dist && build"
}

2).プラグインclean-webpack-pluginを使用する注意:node v 8.0+ && webpack v3.0+

//       ，      ，      
// TypeError: CleanWebpackPlugin is not a constructor
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

plugins: [
    new CleanWebpackPlugin()
]

ここで、注意が必要なのは下のバージョン~古いバージョンは直接導入することができて、新版は必要に応じて導入する必要があります~現在私が引用しているのは3.0バージョンで、必要に応じて導入する必要があります~みんなが使用する時注意して、3.0バージョンより古いならば、先に直接導入を試してみることができて、もしTypeError:CleanWebpackPluginis not a constructorを間違えたら、更に必要に応じて導入するように修正します~
5.html-webpack-externals-plugin:ベースライブラリはパッケージ化されず、直接CDNが開発に導入される場合、react開発の場合、各コンポーネントはreactとreact-domを導入する必要がある場合があります.パッケージ化する際、この2つのベースライブラリの体積が大きくなり、構築されたパッケージのコミットが大きくなることがあります.この場合、htmlでreactとreact-domをCDNで導入することも考えられます.

// wepack.config.js
//       ，  CDN  
const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');

module.exports = {
    new HtmlWebpackExternalsPlugin({
        externals: [
            {
                module: 'react',
                entry: 'https://11.url.cn/now/lib/16.2.0/react.min.js',
                global: 'React'
            },
            {
                module: 'react-dom',
                entry: 'https://11.url.cn/now/lib/16.2.0/react-dom.min.js',
                global: 'ReactDOM'
            }
        ]
    })
};

// index.html

6.friendly-errors-webpack-plugin: ログ プロンプト を するたびに、 くの が されます. によっては、 プロセスと に せず、 が したかどうかだけに を っています.このプラグインはいい ですね~

//         
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');

module.exports = {
    plugins: [
        new FriendlyErrorsWebpackPlugin()
    ]
};

を する もあり、 stats

module.exports = {
    stats: 'errors-only'
};

Webpack-dev-serverを する 、statsという はdevServerに する があります~

devServer: {
    contentBase: './dist/',
    hot: true,
    stats: 'errors-only'
}

しばらくはここまでです~ソースコードはdemoに してください