学习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.cssrequire(’./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尝试运行，成功！结果如下：