webpack4.x打包配置

2018-09-01 05:49:07来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

很长时间没有进行webpack打包配置了,想起来都快有些忘记了,这个东西不是经常用到,只有在新建个项目的时候用到,不用官方模板,自己去动手配置的时候,有时候觉得还是有点难度。今天就想着自己动手进行配置一下,可是还是遇到坑了,折腾了一会,现在的webpack版本都4.x了,有些插件都有些改变。

今天就遇到了一个问题,打算对js里面的css进行分离。原本是把css文件引入到index.js入口文件里面和js一起打包。可是有时候也有这种要求,需要对css文件进行分离打包。这个时候就想到extract-text-webpack-plugin这个插件,可是在使用这个插件之后,webpack打包发生了报错:

 

发现原来extract-text-webpack-plugin这个插件都过时了,在webpack4.4.0版本以上的,开始用mini-css-extract-plugin这个分离css的插件了。

npm install --save-dev mini-css-extract-plugin

安装好这个插件之后,在webpack.config.js中使用:

const MiniCssExtractPlugin  = require('mini-css-extract-plugin')//css分离

module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    "css-loader"
                ]
            },
            {
                test: /\.(png|jpg|gif)/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 5000//如果小于则以base64位显示,大于这个则以图片路径显示
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        })
    ],

之后进行webpack打包,这个打包会提示你要安装webpack-cli依赖,如果没有安装这个依赖打包会报错。

打包之后dist文件下的目录结构:

分离成功。

最后分享一下mini-css-extract-plugin的链接,想好好去学习一下的可以点击https://www.npmjs.com/package/mini-css-extract-plugin进行查看。

这是我第一次玩博客,希望各位多多指教,有错的地方请帮忙指正!谢谢

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:angularjs学习第七天笔记(系统指令学习)

下一篇:小程序中上传图片并进行压缩(二)