webpack生产阶段的配置

最新推荐文章于 2024-07-04 15:33:17 发布

前端薛之谦...

最新推荐文章于 2024-07-04 15:33:17 发布

阅读量542

点赞数

分类专栏： webpack 文章标签： webpack webpack生产版 react+webpack

本文链接：https://blog.csdn.net/weixin_41105030/article/details/88768134

版权

本文介绍了webpack在生产环境中的配置，包括使用webpack-clean-plugin清理旧文件，html-webpack-plugin生成并压缩HTML，uglifyjs-webpack-plugin和optimize-css-assets-webpack-plugin分别压缩JS和CSS，以及mini-css-extract-plugin用于抽离CSS。此外，还讲解了如何配置optimization以实现第三方库的抽离，使用clean-webpack-plugin自动删除dist目录，以及如何处理图片和CSS的打包。最后，文章总结了配置过程中的问题和解决方案。

摘要由CSDN通过智能技术生成

开发–测试–生产

开发版

这是开发版本的配置
webpack.config.js

const path = require('path') //使用node的path模块，来构建路径
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
   
    entry:path.join(__dirname,'/src/main.js'),
    output:{
   
        path:path.join(__dirname,'/dist'),
        filename:'bundle.js'
    },
    plugins:[
        new htmlWebpackPlugin({
   
            template:path.join(__dirname,'/src/index.html'),
            filename:'index.html'
        })
    ],
    module: {
   
        rules: [
          {
   test:/\.css$/,use:['style-loader','css-loader?modules&localIdentName=[name]_[local]-[hash:5]']},
          {
   test:/\.less$/,use:['style-loader','css-loader','less-loader']},
          {
   test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
          {
   test:/\.(png|gif|bmp|jpg|jpeg)$/,use:'url-loader?limit=5000&name=[hash:8]-[name].[ext]'},
          {
   test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},
          {
   
            test:/\.jsx?$/,
            use: {
   
                loader: 'babel-loader',
                options: {
   
                  presets: ['@babel/preset-env','@babel/preset-react'],
                  plugins: ['@babel/transform-runtime']
                }
              },
            exclude: /node_modules/,        
        },
        ]
    }
}