webpack css-loader原理_webpack打包原理入门探究（五）cssloader初探

、

webpack打包原理入门探究(五)loader初探(二)

webpack打包原理入门探究(五)loader初探(一)

webpack打包原理入门探究(四)插件探究(下)

webpack打包原理入门探究(四)插件探究(上)

webpack打包原理入门探究(三)入口探究

webpack打包原理入门探究(二)基本配置

webpack打包原理入门探究(一)

我们需要准备一些文件夹 src/styles/css/common.css

html,body {
margin: 0;
padding: 0;
background: olive;
}

ul, li ,ol {
list-style: none;
margin: 0;
padding: 0;
}

在 src/app.js 引入 src/styles/css/common.css

import './styles/css/common.css'
import layer from './components/layer/layer.js'

const App = () => {
console.log("layer==>", layer)
}

new App()

然后我们需要 配置 css-loader

let path = require('path')
let htmlWebpackPlugin = require('html-webpack-plugin')
function resolve(o) {
return path.resolve(__dirname, o)
}
module.exports = {
entry: resolve('src/app.js'), // 指定入口文件    output: {
path: resolve('dist'),
// filename: '[name]-[hash].js'        filename: "js/[name].bundle.js",
// publicPath: ''    },
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: resolve('node_modules'), //指定排除的范围,                include: resolve('src')
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
]
},
plugins: [
new htmlWebpackPlugin({
// filename: "index-[hash].html",            // filename: 'index-[chunkhash].html',            filename: "index.html", // 生成 dist/a.html            template: 'index.html', // 指定根目录下的 index.html            inject: 'body',
})
]
}

然后执行 npm run webpack.app

样式生效，控制台打印出来了

需要安装 sass-loader node-sass 解析 scss/sass

需要安装 postcss-loader 处理浏览器样式前缀

需要安装 autoprefixer 插件

配置 webpack.app.config.js

let path = require('path')
let htmlWebpackPlugin = require('html-webpack-plugin')
function resolve(o) {
return path.resolve(__dirname, o)
}
module.exports = {
entry: resolve('src/app.js'), // 指定入口文件    output: {
path: resolve('dist'),
// filename: '[name]-[hash].js'        filename: "js/[name].bundle.js",
// publicPath: ''    },
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: resolve('node_modules'), //指定排除的范围,                include: resolve('src')
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.css$/,
loader: 'style-loader!css-loader!postcss-loader'
},
{
test: /\.s[c|a]ss$/,
loader: 'sass-loader'
}
]
},
plugins: [
new htmlWebpackPlugin({
// filename: "index-[hash].html",            // filename: 'index-[chunkhash].html',            filename: "index.html", // 生成 dist/a.html            template: 'index.html', // 指定根目录下的 index.html            inject: 'body',
})
]
}

在根目下新增一个 postcss.config.js

module.exports = {
plugins: [
require('autoprefixer')
]
}

package.json

{
"name": "webpackdemo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --mode development",
"webpack.dev": "webpack --mode development --config webpack.dev.config.js",
"webpack.entry": "webpack --mode development --config webpack.entry.config.js",
"webpack.entry.object": "webpack --mode development --config webpack.entry.object.config.js",
"webpack.html.plugin": "webpack --mode development --config webpack.html.plugin.config.js",
"webpack.html.plugin.multi": "webpack --mode development --config webpack.html.plugin.multi.config.js",
"webpack.app": "webpack --mode development --config webpack.app.config.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/cli": "^7.7.4",
"@babel/core": "^7.7.4",
"@babel/preset-env": "^7.7.4",
"autoprefixer": "^9.7.2",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.6",
"css-loader": "^3.2.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.13.0",
"postcss-loader": "^3.0.0",
"sass-loader": "^8.0.0",
"style-loader": "^1.0.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10"
}
}

跑一遍 npm run webpack.app

我们会发现我们希望处理的浏览器前缀竟然没有生效，其实 css-loader 有一个参数是 importLoaders=1,表示处理后续的 loader 当我们的样式存在 @import 其他样式的时候，需要 postcss-loader 去处理的时候，就要传递这个参数

我们再来看看浏览器

嗯，今天就到此为止吧，接下来的 就等明天吧，该洗洗睡了