学习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
尝试运行，成功！结果如下：
发表回复