学习 webpack4.x – 基础配置学习 webpack4.x – HTML 处理学习 webpack4.x – 样式处理 // 学习 webpack4.x – ES6 语法转化（未整理）// 学习 webpack4.x – 全局变量引入（未整理）// 学习 webpack4.x – 图片处理（未整理）
… 持续中
=======================================================
样式处理
注意：开始之前以下内容之前，需要配置一些 webpack 的基础配置，传送门：学习 webpack4.x – 基础配置
当前目录为：
index.html 文件内容：
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title> 丸子 </title>
</head>
<body>
<div> 我是一个 html 原文件，我想打包后自动把打包后的 js 插入到我的文件中，并且把我自动放到打包后的那个目录中 …</div>
</body>
</html>
package.json 文件内容：
{
“name”: “webpack”,
“version”: “1.0.0”,
“main”: “index.js”,
“license”: “MIT”,
“scripts”: {
“dev”: “webpack –mode development && webpack-dev-server”,
“build”: “webpack –mode production”
},
“devDependencies”: {
“html-webpack-plugin”: “^3.2.0”,
“webpack”: “^4.29.4”,
“webpack-cli”: “^3.2.3”,
“webpack-dev-server”: “^3.1.14”,
“webpack-html-plugin”: “^0.1.1″
}
}
webpack.config.js 文件内容：
let path = require(‘path’);
let HtmlWebpackPlugin = require(‘html-webpack-plugin’);
module.exports = {
// mode: ‘development’,
// 开一个本地服务
devServer: {
port: 3000, // 端口号
progress: true, // 进度条
contentBase: ‘./dist’, // 指定目录运行服务
open: true // 自动打开浏览器
},
entry: ‘./src/index.js’,
output: {
filename: ‘bundle.js’,
path: path.resolve(__dirname, ‘dist’)
},
// 插件配置
plugins: [
new HtmlWebpackPlugin({
template: ‘./src/index.html’, // 原始文件
filename: ‘index.html’, // 打包后的文件名称
hash: true, //hash
})
]
}
下面开始配置 css：
css 配置
首先看看这种直接引入 css 的方法行不行：
step1: 打开 src 目录，新建 index.css 文件，并输入：
body {
background: red;
}
step2: 打开 src 目录的 index.html，直接把 index.css 文件引入，如下：
<link rel=”styleSheet” href=”./index.css” />
尝试运行：npm run dev，打包成功，结果如下：
查看打包好的 dist 目录发现，这种直接引用 css 的方法虽然没有报错，但是在 dist/index.html 中只是原封不动的把 <link rel=”styleSheet” href=”./index.css” /> 输出了，css 并没有生效，所以这种直接引入的方法不可行，那么怎么样把 css 打包进来呢？方法如下：
把 css 作为模块引入文件：
step1：打开 src/index.js 文件，引入要打包的 css 文件：index.css
require(‘./index.css’);
尝试运行：npm run dev, 结果如下：
报了个错说需要一个合适的 loader 来处理这个 css 文件，接下来进行相应的配置：
step2: 打开 webpack.config.js 文件，进行 module 配置:
// 模块配置
module: {
rules: [
{test: /\.css$/, use: [‘style-loader’, ‘css-loader’]}
]
},
安装 style-loader, css-loader:
yarn add style-loader css-loader -D
尝试运行：npm run dev，body 背景颜色变红，打包成功！结果如下：
补充
loader：webpack 打包时，对于 css，图片，或者其他的语法集比如 jsx 等这些是没有办法直接加载的，需要对应的 loader 把资源进行转化并加载，执行顺序：从右到左，从下到上。
css-loader: 解析 css 中的代码，像是 @import 这种语法，比如在 index.css 中引入另一个 other.css 文件，需要 @import ‘./other.css’。
style-loader: 将 css 模块作为样式插入到 DOM 中。
less 配置
step1：打开 src 目录，新建 index.less 文件，并输入：
body {
div {
width: 500px;
height: 500px;
background: yellow;
}
}
step2: 打开 src/index.js 文件，引入 index.less 文件：
require(‘./index.less’);
step3: 打开 webpack.config.js 文件，修改 module 部分：
// 模块配置
module: {
rules: [
{test: /\.(css | less)$/, use: [‘style-loader’, ‘css-loader’, ‘less-loader’]},
]
},
step4: 安装 less, less-loader：
yarn add less less-loader -D
尝试运行，成功！结果如下：