同学们，这节课我们来使用Webpack来搭建一个开发环境。
首先我们创建一个文件夹，叫做 css-learn。
进入目录之后使用 vscode 打开这个目录
code .
接着我们使用 npm 来初始化一下这个项目。
npm init -y
现在项目已经初始化好了。
接着我们来使用 git 来初始化一下这个代码仓库
git init
接着我们需要来创建一个文件，叫做 .gitignore
node_modules
dist
因为这两个目录一个是 npm 安装依赖的目录，还有一个打包生成的一个目录，这两个目录都不用添加到一个仓库里面去的。
接着我们来安装一下 webpack 的一些相关依赖。
npm i webpack webpack-cli webpack-dev-server -D
接着我们来创建一个文件夹，叫做 src.这个目录来存放项目源代码。
然后在 src 目录下面新建一个文件，叫做 index.js 作为项目的入口文件。
touch src/index.js
好,接着在项目根目录下面再创建一个模板文件 index.html，并生成基础代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
</html>
接着就可以来编写webpack配置了。在项目根目录我们创建一个文件叫做 webpack.config.js
这里需要导出一个 node 的一个对象，
module.exports = {
entry: "./src/index.js",
};
接着我们需要引用模板文件。在引用之前，我们需要安装一个插件叫 html-webpack-plugin
npm i html-webpack-plugin -D
接着我们把这个插件导入进来。
webpack.config.js
const HTMLWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.js",
plugins: [
new HTMLWebpackPlugin({
template: "./index.html",
}),
],
};
我们还需要加一个配置项，叫做 mode 也就是编译模式。
webpack.config.js
module.exports = {
mode: "development",
// ...
};
好，到现在我们就已经可以把这个服务跑起来了，在跑起来之前还需要加一个启动脚本。
package.json
{
"scripts": {
"start": "webpack-dev-server"
}
}
现在我们来运行这个命令
npm start
好，服务已经跑起来了，让我们来访问一下!
打开浏览器，访问一下 http://localhost:8080/ 页面是一片空白，这是因为我们还没有写任何内容。
在 index.html 中加入 h1 标签
<h1>Hello World</h1>
好，再来看一下网页，可以看到需要刷新页面，才能加载出来内容。
我们需要修改 webpack 配置来解决这个问题
webpack.config.js
module.exports = {
devServer: {
watchFiles: ["./index.html"],
},
};
然后再重启一下服务
接着,我们再来改动一下 index.html:
<h1>Hello World</h1>
可以看到页面就自动的更新了。
接下来,我们需要去配置一下样式相关的 webpack 配置项。
到 webpack 官网，搜索一下。 css-loader, 跟着官网指南进行安装相关依赖：
npm i css-loader -D
在这个项目里面，我打算使用到 sass 所以我们也去看一下 sass 相关的配置。
根据官网指南安装相关的依赖
npm i sass sass-loader -D
跟着官网教程一步一步的去配置:
webpack.config.js
module.exports = {
// ...
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: ["css-loader", "sass-loader"],
},
],
},
};
我们还需要一个插件，帮我们把 js 中导入的样式文件，提取到单独的 css 文件中去， 这个插件叫做 MiniCssExtractPlugin
webpack.config.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
// ...
plugins: [new MiniCssExtractPlugin()],
// ...
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
},
],
},
};
上面是 sass 类型文件的配置，我们可以复制一份，然后修改为 css 文件的配置:
webpack.config.js
module.exports = {
module: {
rules: [
// sass
{
test: /\.s[ac]ss$/i,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
},
// css
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
],
},
};
接着我们创建一个文件夹: src/style， 来存放样式文件。
创建一个 css文件 src/style/index.css 还有一个 sass 文件 src/style/index.scss 来测试这两种文件类型，webpack 能不能正确的进行解析:
src/style/index.css
body {
background: #ccc;
}
src/style/index.scss
body {
color: green;
span {
background-color: red;
}
}
因为我们修改了 webpack 配置文件，所以需要重启一下服务。
在 src/index.js 中导入这两个样式文件
import "./style/index.css";
import "./style/index.scss";
往 index.html 中加入 span 标签
<span>Sass</span>
可以看到，css 和 scss 类型的文件，都得到了 webpack 的正确解析，在网页中我们写的样式，正常的进行了渲染
为了兼容所有浏览器，我们需要让webpack自动为我们加上一些浏览器前缀。这里需要 postcss-loader 的支持!
我们先来安装相关的依赖
npm i postcss postcss-loader autoprefixer -D
接着，修改 webpack 配置文件
webpack.config.js
module.exports = {
module: {
rules: [
// sass
{
// ...
use: [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
[
"autoprefixer",
{
// Options
},
],
],
},
},
},
"sass-loader",
],
},
// css
{
// ...
use: [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
[
"autoprefixer",
{
// Options
},
],
],
},
},
},
],
},
],
},
};
至此，我们的开发环境的搭建好了，记得修改了 webpack.config.js 需要重启服务
下节课，即将正式进入 CSS 世界的知识学习，希望大家能够和我一起学习！
网友评论