webpack学习经验总结

【声明】本文仅作经验分享，非任何性质教学或其他，如有错误欢迎评论区指出 :)

这里存放一些学习webpack配置的经验总结，也是方便自己以后取用 :）

推荐阅读文章：
webpack学习之webpack.config.js详解
module模块详解

拆分详解：
1、process.env属性开发环境

if (process.env.NODE_ENV == null) {  
    process.env.NODE_ENV = 'development';  
}

2、配置module
相关文章：
webpack中enforce的用法
webpack配置的一些要点
loader详解

在rules部分使用 loader 根据匹配规则打包除 JavaScript 之外的静态资源，为了契合模块化的代码整洁，这里做了单独的定义调用。

const moduleRules = [  
    {  
        test: /\.ts$/,  //匹配文件类型  
        enforce: 'pre', //处理顺序  
        loader: 'tslint-loader', //处理文件的loader类型  
    },  
    {  
        test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9] )?$/,  
        exclude: /loading.svg/,  
        use: [{  //同loader的详解  
            loader: 'file-loader',  //处理文件的loader类型  
            options: {  
                name: '[name].[ext]',  
                outputPath: 'popup/fonts/',  //用来存放打包后文件的输出目录  
                publicPath: './fonts/',  //指定资源文件引用的目录  
            },  
        }],  
    }  
];  

const config = {  
   module: { rules: moduleRules },  
};  

module.exports = config;

3、配置plugin
相关文章：
HtmlWebpackPlugin
MiniCssExtractPlugin
HtmlWebpackPlugin用法总结
如何正确使用sourcemap

同rules，做了单独的定义调用。

const plugins = [  
    new HtmlWebpackPlugin({  //将静态文件插入html  
        template: './src/popup/index.html',  
        filename: 'popup/index.html',  
        chunks: ['popup/polyfills', 'popup/vendor-angular', 'popup/vendor', 'popup/main'],  
        cache: false, // Remove after upgrading to Webpack 5  
    }),  
    new CopyWebpackPlugin({  //拷贝文件  
        patterns: [  
            './src/manifest.json',  
            { from: './src/_locales', to: '_locales' },  
            { from: './src/images', to: 'images' },  
            { from: './src/popup/images', to: 'popup/images' },  
            { from: './src/content/autofill.css', to: 'content' },  
        ]  
    }),  
    new webpack.SourceMapDevToolPlugin({  //devtool  
        include: ['popup/main.js', 'background.js'],  
    }),  
    new MiniCssExtractPlugin({ //为每个包含 CSS 的 JS 文件创建一个单独的 CSS 文件  
        filename: '[name].css',  
        chunkFilename: 'chunk-[id].css',  
    }),  
    new webpack.DefinePlugin({  
        'process.env': {  
            'ENV': JSON.stringify(ENV)  
        }  
    }),  
    new AngularCompilerPlugin({  
        tsConfigPath: 'tsconfig.json',  
        entryModule: 'src/popup/app.module#AppModule',  
        sourceMap: true,  
    }),  
    new CleanWebpackPlugin({  
        cleanAfterEveryBuildPatterns: ['!popup/fonts/**/*'],  
    }),  
];  

const config = {  
   plugins: plugins,,  
};