webpack入门二

2021-04-16 本文已影响0人焚心123

在上一篇中讲到了webpack的基础及简单的打包，今天呢，就说下css,在js中引入css文件怎么作用到我们的页面上及给样式在不同的浏览器中加前缀，最后将css抽离出来为一个文件并进行压缩css代码，打包后使用link的方式进行引入
1、在src下新建一个index.css文件，在我们的index.js中进行引入
index.css

#app{
    width: 400px;
    height: 400px;
    border: 1px solid palegreen;
}
.head{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: red;
    margin: 40px;
}

index.js

import './index.css';//todo 这是我们引入的样式文件
let a = '11111';
console.log('sadada');

index.html

<body>
    <div id="app">
        <p class="head"></p>
    </div>
</body>

下载相应的解析css的loader
npm install style-loader css-loader -D //todo 目前只在本地运行所以-D

下载好了之后，我们在kfc.config.js中进行配置

    const path = require('path');
    //todo 通过HtmlWebpackPlugin这个插件，可以将index.html进行复制，打包后会将打包的js文件等自动的引入
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    module.exports = {
        // entry:'./src/index.js',//入口文件（单文件入口）
        entry:{//todo 多文件入口
            index:'./src/index.js',
            // main:'./src/main.js'
        },
        output:{
            path:path.resolve(__dirname,'./build'),//todo 打包后存放的文件名
            filename:'[name].js'//todo 打包后的文件名,单文件'build.js'直接写，多文件[name],入口文件名是啥，打包后还是啥
        },
        //todo 当前的模式，none 不做任何的处理 development开发环境做了相应的处理，方便调试，production生产环境会启动相应的插件
        mode:'development',
        module:{//todo 模块，一般可以将我们的scss,less,.vue等进行loader解析，在输出
            rules:[//todo 规则
                {//todo 每个模块都是独立的
                    test:/\.css$/,//todo .css结尾的文件进行解析
                    use:['style-loader','css-loader']//todo 自后往前的顺序，不能写错了，还可以单独的配置loader
                }
            ]
        },
        plugins:[//todo 不同的插件，可以帮助我们处理不同的事
            new HtmlWebpackPlugin({
                template:'./src/index.html'
            })
        ]
    }

image.png

*　根据上面的配置好了之后，使用npm run build 进行打包，这时你就可以在浏览器中看到样式已经作用上了

效果图

image.png
2、有的人使用less,有的使用scss,还有的使用stylus,那么下面使用scss进行演示下，你们就会了，首先创建一个index.scss
index.scss

$color-red:red;
$color-orange :orange;
$head-width:40px;
body{
    #app{
        width: 400px;
        height: 400px;
        background: $color-orange;
        .head{
            width: $head-width;
            height: $head-width;
            background: $color-red;
        }
    }
}

index.js引入样式文件

import './index.scss';
let a = '11111';
console.log('sadada');

下载 npm install sass-loader@10.1.1 node-sass webpack -D //sass-loader最新版本有点问题，打包的时候报错了，所以降低版本

kfc.config.js

image.png
此时打开我们的浏览器看看效果

image.png
image.png
3、此时，我们完成了一半了，我们用了新的css新增的样式，那么在其他的浏览器中不支持怎么办，我们使用postcss这个插件在不同的浏览器中给样式加个前缀
我们可以在GitHub中搜索postcss，进去看看，里面还有其他的插件，特别的多，有兴趣的小伙伴可以去看看哟，我们用到它里面的autoprefixer

image.png
下载

npm install --save-dev postcss-loader postcss
npm install autoprefixer -D //这是加css前缀的
npm install cssnano -D //这是css进行压缩的

在kfc.config.js中

image.png
在根目录下，新建一个postcss.config.js就是配置postcss的文件

module.exports = {
    plugins: [
      require('autoprefixer'),//引入这个插件就可以了
      require('cssnano')//引入这个插件就可以了
    ]
  }

好了吗？不，还有最关键的一步，我们需要指定一些需要兼容的浏览器进行添加css前缀，不能一股脑的全部添加，因为有的浏览器版本已经被淘汰了，所以也不需要我们进行兼容，可以百度下browserslist，了解下这个，这里只做简单的介绍，我们可以在package.json中进行设置，也可以在根目录下新建一个.browserslistrc文件进行配置，或者在postcss.config.js中直接配置也是可以的
package.json中

image.png
在根目录下新建.browserslistrc文件，不用逗号，换行就行

image.png
postcss.config.js

image.png