webpack.config.js中的css样式、sass、打包抽离，浏览器加前缀（兼容），图片文件处理，ES6处理

1.安装css和style插件

yarn add style-loader css-loader

index.css

body{ background:skyblue; }

将样式引入js文件

//引入样式 require('./index.css') console.log(2+2)

在webpack.config.js中配置文件 module.exports内添加：

module: { rules: [ { test: /\.css$/i, //匹配找到任何以css为后缀的文件（匹配） use: ['style-loader', 'css-loader'], //从后往前的顺序，先将css解析，而后再将其放入style标签里去(use:用xxx) }, ], },

2.安装解析sass插件

yarn add sass-loader node-sass

index.scss:

$bg-color:greenyellow; body{ background:$bg-color; }

将样式引入js文件

//引入样式 require('./index.scss') console.log(2+2)

在webpack.config.js中配置文件 module.exports内添加：

module: { rules: [ { test: /\.css$/i, //匹配找到任何以css为后缀的文件（匹配） use: ['style-loader', 'css-loader'], //从后往前的顺序，先将css解析，而后再将其放入style标签里去(use:用xxx) }, { test: /\.s[ac]ss$/i, //和上述一样 use: [ //从后往前顺序 'style-loader', 'css-loader', 'sass-loader', ], }, ], },

3.CSS样式打包抽离

安装插件：

yarn add mini-css-extract-plugin -D

引入模块

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

仅将‘style-loader‘改为MiniCssExtractPlugin.loader

plugins: [new MiniCssExtractPlugin({ filename:'css/[name].[chunkhash:5].css' //将所有的css文件抽包，css文件会自动引入html中 })], module: { rules: [ { test: /\.css$/i, //匹配找到任何以css为后缀的文件（匹配） use: [MiniCssExtractPlugin.loader, 'css-loader'], //从后往前的顺序，先将css解析，而后再将其放入style标签里去(use:用xxx) }, { test: /\.s[ac]ss$/i, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader', ], }, ], },

4.给浏览器加前缀

安装两个插件

yarn add postcss-loader autoprefixer

package.json文件

"browserslist":[ "cover 99.5%" //覆盖99.5%浏览器 ]

webpack.config.js文件

module: { rules: [ { test: /\.css$/i, //匹配找到任何以css为后缀的文件（匹配） use: [MiniCssExtractPlugin.loader, 'css-loader'], //从后往前的顺序，先将css解析，而后再将其放入style标签里去(use:用xxx) }, { test: /\.s[ac]ss$/i, use: [ MiniCssExtractPlugin.loader, 'css-loader', //为了解决浏览器兼容问题 { loader: 'postcss-loader', options: { postcssOptions: { plugins: [ require('autoprefixer') ] }, }, }, 'sass-loader', ], }, ], },

5.图片、文件处理

安装插件

yarn remove file-loader -D

webpack.config.js文件

{ test: /\.(png|jpe?g|gif)$/i, use: [ { loader: 'file-loader', options: { publicPath: "/", //服务器路径 name: 'images/[name].[ext]', //放入的路径，与上面进行拼接为路径 }, }, ], },

完事利用webpack.dev.server打开

第二种方法

安装插件

yarn add url-loader

具体配置

/* 下面采用url-loader来去处理图片资源 当图片大小高于指定的limit，内部将会按照file-loader状态进行生成 当图片大小低于指定的limit，内部就会将其转成base64位，减少http请求 一般在项目中，低于20kb左右的图片可以转成base64位，减少http请求 1G=1024M 1M=1024kb 1kb=1024byte 1byte=8bit */ { test: /\.(png|jpe?g|gif)$/i, use: [ { loader: 'url-loader', options: { publicPath: "/", //服务器路径 name: 'images/[name].[ext]', //放入的路径 limit:15000 //相当于字节大小15kb }, }, ], },

6.处理ES6

安装插件

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

webpack.config.js文件配置

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