1.3 webpack 配置css等样式表 抽离输出 附源码

·  阅读 380

上一节已经介绍了webpack 怎么打包输出js文件和html文件,本节继续跟进怎么打包css文件!

一、css loader 插件下载

    webpack 打包默认是不识别css代码块,我们可以创建一个css文件,修改下body颜色为紫色。

    在index.js 引入这个css文件,执行npm run build命令,显然是报错了!!!说是不识别css的样式语法,需要合适的loader转化css。

二、webpack 配置识别css模块

  • 1.首先我们需要使用npm 下载两个loader (css-loader,style-loader),终端执行命令 npm i css-loader style-loader -D
  • 2.修改配置文件
  • 3.执行npm run dev,访问http://localhost:5555/,页面变成了紫色。

三、webpack 配置识别less模块

    这个和上面类似了 npm i less less-loader -D 下载loader转换器。

  • 1.增加less文件,在index.js中 使用require('./index.less')引入。

  • 2.修改配置文件增加less文件识别

  • 4.在运行npm run dev 看下效果吧!

ps:例如sass 等都可以用相同的方式引用!

四、配置抽离样式文件的插件

  • 1.我们使用一个插件npm install mini-css-extract-plugin -D
  • 2.接着修改webpack 配置文件

    1. 在工程目录下运行 npm run build看下输出吧!

五、适配浏览器前缀

    例如旋转transform样式,我们需要加上前缀,该怎么做呢?

  • 1.这里我们需要执行命令 npm i postcss-loader autoprefixer -D下载插件。
  • 2.修改webpack 配置文件。
  • 3.执行npm run build 报错了,提示缺少配置文件

  • 4.我们需要创建一个postcss.config.js文件,写入自动引入的插件
module.exports = {
    plugins:[require('autoprefixer')]
}
复制代码
  • 5.在package.json 内加入
 "browserslist":[
    "last 10 version"
  ]
复制代码
  • 6.执行npm run build ,查看index.css输出结果,成功加上了前缀!

六、css 压缩

前面我使用 mini-css-extract-plugin 进行样式抽离。我们去这里看下www.npmjs.com/package/min…,我们还需要一个插件进行css 压缩!

执行命令 npm i terser-webpack-plugin optimize-css-assets-webpack-plugin -D 然后修改配置文件

执行npm run build 可以在输出文件看出 index.css,index.js全部都被压缩了!

源码下载

创建文件夹,cd至已创建文件夹,执行 git clone https://gitee.com/dolan_ge/webpack.git -b webpack_load_css

进入工程目录,执行 npm install -D。配置下webconfig 的配置文件如下:

{
    test: /\.html$/,
    use: [{
        loader: 'html-withimg-loader'
    }]
},
复制代码

执行

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改