webpack2-样式(样式打包提取与分离）

webpack学习之样式篇

添加样式

index.js修改如下
不使用link引入因为引入后打包时没有.css这个文件的，下面会说到

require('./index.css')
document.body.innerHTML='<div class="good"></div>'
console.log(12)

在添加如下index.css （src/index.css）

body{
    background-color: aqua;
    transform: rotate(45deg);
}
.good{
    background-color: black;
    margin-top: 200px;
    margin-left: 200px;
    width:200px;
    height: 200px;
}

安装css-loader用于做css的@引入和style-loader用于将css插入头部中后在webpack.config.js中做如下配置：

配置是从下往上使用，按照逻辑关系应该先使用css-loader再使用style-loader

module:{
        rules:[
            
                {
                    test:/\.css$/,
                    use:[
                       'style-loader',
                        'css-loader'
                    ]    
                }  
              
        ]
    }

执行npm run dev

访问路径后可以出现如下图

执行npm run build之后只有html和js文件

当需要css文件的时候

css抽离

参考链接中Minimizing For Production部分

其中各个plugin用处如下

MiniCssExtractPlugin:抽离css

OptimizeCSSAssetsPlugin :压缩css文件

TerserJSPlugin :使用了上方的css压缩后会使得原本的js文件不处于压缩状态，此插件用于解决该冲突

依据参考链接中的配置进行配置后打包即可获得抽离的css文件

css前缀

当使用上述方法进行抽离压缩之后发现并没有-webkit-之类的前缀

安装loader

npm i postcss-loader autoprefixer

module中完成配置

 rules: [
            
            {
                test: /\.css$/,
                use: [
                MiniCssExtranctPlugin.loader,
                'css-loader',//需要先处理css-loader在style-loader
                'postcss-loader'
            ]  
            }

        ]

接着需要写一个postcss.config.js

module.exports={
    plugins:[require('autoprefixer')]
}

执行npm run build之后即可查看效果，发现存在-webkit-transform -ms-transform