webpack踩坑

最新在研究webpack4然后遇到了一些坑，记录一下填坑之旅。

plugins

webpack4+已移除了CommonsChunkPlugin改用SplitChunksPlugin进行替换，默认的配置如下：

var webpack = require('webpack');

module.exports = {
    .... 省略前面
    plugins:[
        new webpack.optimize.SplitChunksPlugin({
            // 配置的信息不变
        })
    ]
}
复制代码

主要的就是把CommonsChunkPlugin改成SplitChunksPlugin即可。

提取css

extract-loader
ExtractTextWebpackPlugin
复制代码

安装

npm install extract-text-webpack-plugin --save-dev
复制代码

webpack.config.js中进行配置

var ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');

module.exports = {
    ...
    module:{
        rules:[
            {
                test: /\.css$/,
                use: ExtractTextWebpackPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                modules: true,
                                localIdentName: '[path][name]_[local][hash]'
                            }
                        }
                    ]
                })
            }
        ]  
    },
    plugins: [
        new ExtractTextWebpackPlugin({
            filename: '[name].min.css'
        })
    ]
}
复制代码

提取CSS的文件的主要的思想的就是，使用extract-text-webpack-plugin的插件，然后书写提取出的插件的名称，然后就是使用extract属性进行提取，

PostCss

• PostCSS
• Autoprefixer
• CSS-nano
• CSS-next

安装

npm install postcss postcss-loader autoprefixer cssnano postcss-cssnext --save-dev
复制代码

配置

module.exports = {
    module:{
        rules:[
            use: {
                test: /\.css$/,
                use:[
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            plugins: [
                                require('autoprefixer')()
                            ]
                        }
                    }
                ]
            }
        ]
    }
}
复制代码

当我们使用引入多个plugin的时候，我们需要定义ident:postcss

js tree shaking

uglifyjs-webpack-plugin 就是压缩JS文件的

安装

npm install uglifyjs-webpack-plugin --save-dev
复制代码

配置

var uglifyjsWebpackPlugin = 
module.exports = {
    ...
    plugins: [
        new uglifyjsWebpackPlugin();
    ]
}
复制代码

css tree shaking

安装

npm install purifycss-webpack purify-css --save-dev
npm install glob-all --save-dev
复制代码

配置

var PurifyCssPlugin = require('purifycss-webpack');
var GlobAll = require('glob-all');

module.exports = {
    ....
    plugins: [
        new PurifyCssPlugin({
            paths: GlobAll.sync([
                path.join(__dirname, './index.html'),
                path.join(__dirname, './src/*.js')
            ])
        })
    ]
}
复制代码

图片处理

• css中引入的图片
• 自动合成雪碧图
• 压缩图片
• Base64编码

需要使用到的loader：

• file-loader
• url-loader
• img-loader
• postcss-sprites

安装

npm install file-loader url-loader img-loader postcss-sprites --save-dev
复制代码

配置

处理css文件中的图片：

// webpack.config.js
module.exports = {
    ...
    module: {
        rules:[
            {
                test: /\.(jpg|png|jpeg|gif)$/,
                use: [
                    {
                        loader: 'file-loader', // 处理css中图片的loader
                        options: {
                            publicPath: 'dist/', // 公共路径
                            useRelativePath: true // 相对路径
                        }
                    }
                ]
            }
        ]
    }
}
复制代码

压缩图片：

文件低于指定的文件的大小时，会返回一个DATAURL

// webpack.config.js
module.exports = {
    ...
    module: {
        rules: [
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 1012
                        }
                    }
                ]
            }
        ]
    }
}
复制代码