其他分享
首页 > 其他分享> > webpack4基础知识点(二)

webpack4基础知识点(二)

作者:互联网

1.解析css,less,sass

先下载依赖包

//解析css
npm i style-loader css-loader -D
//解析less
npm i less less-loader -D
//解析sass
npm i sass sass-loader -D
module.exports={
    module:{
        rules:[
            {
                test/\.css$/,
                use:[
                    'style-loader', //因为loader是链式从右向左调用,因此顺序千万不能错,先使用css-loader再使用style-loader
                    'css-loader']
            },
            {
                test: /\.less$ /,
                use: [
                    'style-loader', //因为loader是链式从右向左调用,因此顺序千万不能错,先使用css-loader再使用style-loader
                    'css-loader',
                    'less-loader']
            },
            {
                test: /\.sass$ /,
                use: [
                'style-loader', //因为loader是链式从右向左调用,因此顺序千万不能错,先使用css-loader再使用style-loader
                'css-loader',
                'sass-loader']
            },
        ]
    }
}

2.解析图片和字体

先下载依赖包

npm i file-loader -D
module.exports={
    module:{
        rules:[
            {
               test: /\.(jpg|png|svg|gif)$/, //图片
                use: [{
                    loader: 'file-loader',
                    options: {
                        outputPath:'images/',//输出到images文件夹
                        limit:500, //是把小于500B的文件打成Base64的格式,写入JS
                        name: '[name].[hash:7].[ext]',//ext为后缀,hash是md5生成的24位字符串,:7表示取前七位
                 }]
            },
            {
               test: /\.(woff|woff2|eot|ttf|otf)$/,  //字体
                use: [{
                    loader: 'file-loader',
                    options: {
                        limit: 10000,
                        name: '[name].[hash:7].[ext]',
                 }]
            }
        ]
    }
}

url-loader也可以处理图片和字体,可以设置较小资源自动base64(base64的好处就是减少http请求次数,优化页面加载性能),其内部也用到了file-loader

3.postcss autoprefixer插件自动补齐css3前缀

下载插件

npm i postcss-loader autoprefixer -D

方法一:

webpack.config.js

module.exports = {
    module: {
        rules: [{
                test: /\.css$/,
                use: [
                    MinicssExtractPlugin.loader, //此处用MinicssExtractPlugin.loader替代'style-loader'
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: () => [ //一定要注意这里是[ ]
                                require('autoprefixer')({
                                    overrideBrowserslist: ['last 5 version', '>1%', 'ios 7']
                                })
                            ]
                        }
                    }
                ]
            },
        ]
    }
}

方法二:

添加一个.browserslistrc配置文件

last 5 version
> 1%
ios 7

webpack.config.js

module.exports = {
    module: {
        rules: [{
                test: /\.css$/,
                use: [
                    MinicssExtractPlugin.loader, //此处用MinicssExtractPlugin.loader替代'style-loader'
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [require('autoprefixer')]
                        }
                    }
                ]
            },
        ]
    }
}

方法三:

在package.json中增加如下配置

{
    "browserslist":[
        "last 5 version",
        "> 1%",
        "ios 7"
     ]
}

webpack.config.js

module.exports = {
    module: {
        rules: [{
                test: /\.css$/,
                use: [
                    MinicssExtractPlugin.loader, //此处用MinicssExtractPlugin.loader替代'style-loader'
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [require('autoprefixer')]
                        }
                    }
                ]
            },
        ]
    }
}

4.压缩css,js,html

先下载依赖包

npm i mini-css-extract-plugin optimize-css-assets-webpack-plugin cssnano -D

webpack.config.js

const path = require('path');
//html扩展包
const HtmlWebpackPlugin = require('html-webpack-plugin');
//从js中提取css到单独的文件
const MinicssExtractPlugin = require('mini-css-extract-plugin');
//压缩css
const OtimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports={
    mode:'development',  //——>指定当前构建环境
    entry:[
        app:'./path/app.js',
        admin:'./path/admin.js'
    ],
    output:{
        filename:'[name].js',
        path:path.join(__dirname,'dist');
    },
    module:{
        rules:[
            {
                test: /\.css$/,
                use: [MinicssExtractPlugin.loader, 'css-loader'] //此处用MinicssExtractPlugin.loader替代'style-loader'
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({    //———>放在plugins数组里
            template:path.join(__dirname,'src/admin.html'),
            filename:'admin.html',
            chunks:['admin'], //我的理解是一个入口就是一个chunk
            inject:true,  //是否注入css,js,true表示在打包完成的 admin.html 内自动引入 chunks 为 admin 的css,js
            minify:{ //压缩html
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true,
                minifyCss:true, //——>此处的minifyCss/js是为了压缩admin.html页面内的内嵌css/js,并不会对外链的css/js有影响
                minifyJs:true
            }
        }),
        // 提取并压缩css
        new MinicssExtractPlugin({
            filename: config.cssOutputPath
        }),
        // 压缩css
        new OtimizeCssAssetsPlugin({
            assetNameRegExp: /\.css$/g,
            cssProcessor: require('cssnano') //此处压缩css代码配合cssnao
        }),
    ]
}

5.自动清理构建目录

下载插件:

npm i clean-webpack-plugin -D

webpack.config.js

const path = require('path');
//自动清理构建目录
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports={
   plugins:[
        new CleanWebpackPlugin()
    ]
}

我的个人博客,有空来坐坐

标签:MinicssExtractPlugin,知识点,style,webpack4,基础,module,js,loader,css
来源: https://blog.csdn.net/weixin_29491885/article/details/100532920