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

到上一节已经介绍了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 配置文件

• 3. 在工程目录下运行 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'
    }]
},
复制代码

执行