Css- Loader
安装npm install --save-dev style-loader css-loader用法css-laoder 是解释 @import 和 url()。
// common.csshtml , body {background: pink;padding: 0px;margin: 0px;background: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521820324449&di=2930f7026f4242fdfdabf7b5cc0cac35&imgtype=0&src=http%3A%2F%2Fimg0.pconline.com.cn%2Fpconline%2F1312%2F04%2F3938137_2886_thumb.jpg');}// flex布局div {display: flex;}// postcss处理后会为其添加兼容各浏览器的前缀// 当你打开打包后的html文件后，会在head中发现多了些style标签，里面就是你的样式内容// app.jsimport './common/common.css'; // 引入css// webpack.config.jsmodule: {rules: [{test: /\.js$/,exclude: /(node_modules|bower_components)/, // 优化处理加快速度use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env']// 这里需要npm安装babel-preset-latest}}},{test: /\.css$/,use: [ 'style-loader', 'css-loader' ] //可以是数组的格式，指定需要的loader,这里顺序需要注意一下，执行的时候是先执行 css-loader -> style-laoder // 这里也可以传入参数}]},options 参数root
默认是 / 。对于 / 开头的URL， 默认行为是不转义的。
url(/image.png) => url(/image.png)
如果设置了 root 参数 ,那么查询参数将被添加到 URL 前面。
use: [{laoder: 'css-loader',options: {root: '.'}}]// url(/image.png) => require('./image.png')// root参数不建议使用，使用旧版的即可
url
是否禁用url()解析默认是false.
url(image.png) => require('./image.png')url(~module/image.png) => require('module/image.png')import
要禁用css-loader 解析 @import 可以设置import为false
但是提示要谨慎使用，一般没有人会这么做的modules
modules 会启用 CSS 模块规范。
importLoaders
用于配置「css-loader 作用于 @import 的资源之前」有多少个 loader。
var htmlWebpackPlugin = require('html-webpack-plugin')const path = require('path')module.exports = {mode: 'development',entry: './src/app.js',output: {filename: 'js/bundle.js',path: path.resolve(__dirname, 'dist')},module: {rules: [{test: /\.js$/,exclude: /(node_modules|bower_components)/, // 优化处理加快速度use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env']}}},{test: /\.css$/,exclude: '/node_modules/',use: [{loader: 'style-loader'},{loader: 'css-loader',options: {importLoaders: 1 //当css文件中又有引入了其他的css的时候，需要设置一下importLoaders}},{loader: 'postcss-loader',// 需要npm安装postcss-loaderoptions: {ident: 'postcss',plugins: (loader) => [ require('postcss-import')({ root: loader.resourcePath }), require('postcss-cssnext')(), require('autoprefixer')(), require('cssnano')()] }}]}]},plugins: [new htmlWebpackPlugin({template: 'index.html',inject: 'body',filename: 'index.html'})]}未完待续，继续学习继续补充哦~