webpack的css处理和图片处理

一、css的处理 1、安装解析css的loader

yarn add style-loader css-loader

2、在webpack.config.js文件中配置 test：用于匹配文件类型 use：从后往前的顺序 先用css-loader解析css文件、再用style-loader将解析的代码放入style标签中

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

二、sass-loader 1、安装sass-loader与node-sass环境

yarn add sass-loader node-sass

2、添加配置项 use：先将sass转移成css在从css通过style-loader放进style标签中

module: { rules: [ { test: /\.s[ac]ss$/i, use: [ // Creates `style` nodes from JS strings 'style-loader', // Translates CSS into CommonJS 'css-loader', // Compiles Sass to CSS 'sass-loader', ], }, ], },

三、样式的单独处理与打包 1、安装

yarn add mini-css-extract-plugin -D

2、引入

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

3、更改配置 将style-loader替换成MiniCssExtractPlugin.loader

{ test: /\.css$/i, use: [MiniCssExtractPlugin.loader, 'css-loader'], },

4、单独文件夹放置css、js

filename:"js/[name].[chunkhash:5].js" new MiniCssExtractPlugin({ filename:"css/[name].[chunkhash:5].css" })

四、样式的兼容 postcss-loader与autoprefixer搭配使用 1、安装

yarn add postcss-loader autoprefixer

2、配置 （1）在css-loader后面配置【注将其中的】plugins配置改为如下配置

{ loader: 'postcss-loader', options: { postcssOptions: { plugins: [ require('autoprefixer') ] }, }, },

（2）package.json中配置

"browserslist":[ "cover 99.5%" ]

五、file-loader图片的处理 1、安装

yarn add file-loader

2、配置 publicPath：在根目录下查找

{ test: /\.(png|jpe?g|gif)$/i, use: [ { loader: 'file-loader', options: { publicPath: '/', name: 'images/[name].[ext]', }, }, ], },

六、url-loader图片处理 1、安装

yarn add url-loader

2、配置

与file-loader相比多了一个limit配置项可以控制字节大小当图片大小高于指定的limit内部将会按照file-loader状态进行生成图片当图片大小小于指定的limit内部就会将其转成base64位，主要作用减少http的请求一般项目图片大小，小于20kb左右的图片可以装成base64位减少http的请求，如果大于就没必要了因为字体也会很大 { test: /\.(png|jpe?g|gif)$/i, use: [ { loader: 'url-loader', options: { publicPath: '/', name: 'images/[name].[ext]', limit:30000 }, }, ], },

七、es6语法处理 1、安装

yarn add babel@6.23.0 babel-core@6.24.1 babel-loader@7.0.0 babel-preset-es2015@6.24.1 babel-preset-react@6.24.1 -D yarn add babel-preset-stage-0

2、配置

{ test:/\.js$/, exclude: /node_modules/, loader:'babel-loader', query: { presets: ['es2015','react','stage-0' ] } }