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

、

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 去处理的时候，就要传递这个参数

我们再来看看浏览器

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