forked from dongyuanxin/blog
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
156b0cf
commit 87e2870
Showing
25 changed files
with
3,157 additions
and
25 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -14,7 +14,7 @@ permalink: "2018-09-06-git-tag-and-version" | |
|
|
||
| 首先我在 github 上建立了一个仓库。如你所见，这是一个全新仓库：[>>> Star now](https://github.com/dongyuanxin/git-demos) | ||
|
|
||
|  | ||
|  | ||
|
|
||
| 执行`git clone [email protected]:dongyuanxin/git-demos.git`, 将代码库 clone 到本地后。 | ||
|
|
||
|
|
@@ -57,10 +57,10 @@ Now, 为代码库在本地打上标签：`git tag v1.0.0 -m 'v1.0.0正式版本' | |
| 我们首先将`v1.0.0`版本推送到 Github：`git push origin v1.0.0` | ||
|
|
||
| 然后，打开仓库，我们会发现`releases`标签已经变成了 1。 | ||
|  | ||
|  | ||
|
|
||
| 点进去，会发现我们可以直接下载`v1.0.0`版本。所以，标签是版本的快照。 | ||
|  | ||
|  | ||
|
|
||
| 值得一提的是：**标签会随着`git clone`仓库时候，自动拉取到本地**。不信的话可以 clone 一下这个代码仓库，查看是不是已经有了`v1.0.0`这个标签。 | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| --- | ||
| title: "一：打包JS" | ||
| date: 2018-07-30 | ||
| permalink: "2018-07-30-webpack-pack-js" | ||
| --- | ||
|
|
||
| > webpack 本身就是为了打包`js`所设计，作为第一节，介绍**怎么打包`js`**。 | ||
| ### 1. 检验`webpack`规范支持 | ||
|
|
||
| `webpack`支持`es6`, `CommonJS`, `AMD`。 | ||
|
|
||
| 创建`vendor`文件夹，其中`minus.js`、`multi.js`和`sum.js`分别用 CommonJS、AMD 和 ES6 规范编写。 | ||
|
|
||
| [>>> vendor 文件夹 代码地址](https://github.com/dongyuanxin/webpack-demos/tree/master/demo01/vendor) | ||
|
|
||
| 在入口文件`app.js`中，我们分别用 3 中规范，引用`vendor`文件夹中的 js 文件。 | ||
|
|
||
| ```javascript | ||
| // ES6 | ||
| import sum from "./vendor/sum"; | ||
| console.log("sum(1, 2) = ", sum(1, 2)); | ||
|
|
||
| // CommonJs | ||
| var minus = require("./vendor/minus"); | ||
| console.log("minus(1, 2) = ", minus(1, 2)); | ||
|
|
||
| // AMD | ||
| require(["./vendor/multi"], function(multi) { | ||
| console.log("multi(1, 2) = ", multi(1, 2)); | ||
| }); | ||
| ``` | ||
|
|
||
| ### 2. 编写配置文件 | ||
|
|
||
| `webpack.config.js`是 webpack 默认的配置文件名，[>>> webpack.config.js 代码地址](https://github.com/dongyuanxin/webpack-demos/blob/master/demo01/webpack.config.js)，其中配置如下： | ||
|
|
||
| ```javascript | ||
| const path = require("path"); | ||
|
|
||
| module.exports = { | ||
| entry: { | ||
| app: "./app.js" | ||
| }, | ||
| output: { | ||
| publicPath: __dirname + "/dist/", // js引用路径或者CDN地址 | ||
| path: path.resolve(__dirname, "dist"), // 打包文件的输出目录 | ||
| filename: "bundle.js" | ||
| } | ||
| }; | ||
| ``` | ||
|
|
||
| 注意`output.publicPath`参数，代表：**`js`文件内部引用其他文件的路径**。 | ||
|
|
||
| ### 3. 收尾 | ||
|
|
||
| 打包后的`js`文件会按照我们的配置放在`dist`目录下，这时，**需要创建一个`html`文件，引用打包好的`js`文件**。 | ||
|
|
||
| 然后在 Chrome 打开(**这节课只是打包`js`,不包括编译`es6`**)，就可以看到我们代码的运行结果了。 | ||
|
|
||
| ### 4. 更多 | ||
|
|
||
| 本节的代码地址：[>>> 点我进入](https://github.com/dongyuanxin/webpack-demos/tree/master/demo01) | ||
|
|
||
| 项目的代码仓库：[>>> 点我进入](https://github.com/dongyuanxin/webpack-demos) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,182 @@ | ||
| --- | ||
| title: "七：SCSS提取和懒加载" | ||
| date: 2018-08-28 | ||
| permalink: "2018-08-28-webpack-scss-lazy" | ||
| --- | ||
|
|
||
| 本节课讲解在`webpack v4`中的 SCSS 提取和懒加载。值得一提的是，`v4`和`v3`在 Scss 的懒加载上的处理方法有着巨大差别： | ||
|
|
||
| - 入口文件需要引用相关 LOADER 的 css 文件 | ||
| - 配置需要安装针对`v4`版本的`extract-text-webpack-plugin` | ||
|
|
||
| <!-- more --> | ||
|
|
||
| > 本节课讲解在`webpack v4`中的 SCSS 提取和懒加载。值得一提的是，`v4`和`v3`在 Scss 的懒加载上的处理方法有着巨大差别。 | ||
| [>>> 本节课源码](https://github.com/dongyuanxin/webpack-demos/tree/master/demo07) | ||
|
|
||
| [>>> 所有课程源码](https://github.com/dongyuanxin/webpack-demos) | ||
|
|
||
| ### 1. 准备工作 | ||
|
|
||
| 关于 SCSS 处理的基础，请参考[webpack4 系列教程(六): 处理 SCSS](https://godbmw.com/passage/37)。 | ||
|
|
||
| 本节课主要涉及 SCSS 在懒加载下提取的相关配置和插件使用。 | ||
|
|
||
| 下图展示了这次的目录代码结构： | ||
|
|
||
|  | ||
|
|
||
| 为了实现 SCSS 懒加载，我们使用了`extract-text-webpack-plugin`插件。 | ||
|
|
||
| 需要注意，**在安装插件的时候，应该安装针对`v4`版本的`extract-text-webpack-plugin`**。npm 运行如下命令：`npm install --save-dev extract-text-webpack-plugin@next` | ||
|
|
||
| 其余配置，与第六课相似。`package.json`配置如下： | ||
|
|
||
| ```json | ||
| { | ||
| "devDependencies": { | ||
| "css-loader": "^1.0.0", | ||
| "extract-text-webpack-plugin": "^4.0.0-beta.0", | ||
| "node-sass": "^4.9.2", | ||
| "sass-loader": "^7.0.3", | ||
| "style-loader": "^0.21.0", | ||
| "webpack": "^4.16.0" | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| 关于我们的 scss 文件下的样式文件，`base.scss`: | ||
|
|
||
| ```scss | ||
| // 网站默认背景色：red | ||
| $bgColor: red !default; | ||
| *, | ||
| body { | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
| html { | ||
| background-color: $bgColor; | ||
| } | ||
| ``` | ||
|
|
||
| `common.scss`: | ||
|
|
||
| ```scss | ||
| // 覆盖原来颜色：green | ||
| html { | ||
| background-color: green !important; | ||
| } | ||
| ``` | ||
|
|
||
| ### 2. 使用`ExtractTextPlugin` | ||
|
|
||
| 使用`extract-text-webpack-plugin`，需要在`webpack.config.js`的`plugins`选项和`rules`中`scss`的相关选项进行配置。 | ||
|
|
||
| `webpack.config.js`: | ||
|
|
||
| ```javascript | ||
| const path = require("path"); | ||
| const ExtractTextPlugin = require("extract-text-webpack-plugin"); | ||
|
|
||
| module.exports = { | ||
| entry: { | ||
| app: "./src/app.js" | ||
| }, | ||
| output: { | ||
| publicPath: __dirname + "/dist/", | ||
| path: path.resolve(__dirname, "dist"), | ||
| filename: "[name].bundle.js", | ||
| chunkFilename: "[name].chunk.js" | ||
| }, | ||
| module: { | ||
| rules: [ | ||
| { | ||
| test: /\.scss$/, | ||
| use: ExtractTextPlugin.extract({ | ||
| // 注意 1 | ||
| fallback: { | ||
| loader: "style-loader" | ||
| }, | ||
| use: [ | ||
| { | ||
| loader: "css-loader", | ||
| options: { | ||
| minimize: true | ||
| } | ||
| }, | ||
| { | ||
| loader: "sass-loader" | ||
| } | ||
| ] | ||
| }) | ||
| } | ||
| ] | ||
| }, | ||
| plugins: [ | ||
| new ExtractTextPlugin({ | ||
| filename: "[name].min.css", | ||
| allChunks: false // 注意 2 | ||
| }) | ||
| ] | ||
| }; | ||
| ``` | ||
|
|
||
| 在配置中，**注意 1**中的`callback`配置项，针对 不提取为单独`css`文件的`scss`样式 应该使用的 LOADER。即使用`style-loader`将 scss 处理成 css 嵌入网页代码。 | ||
|
|
||
| **注意 2**中的`allChunks`必须指明为`false`。否则会包括异步加载的 CSS！ | ||
|
|
||
| ### 3. `SCSS`引用和懒加载 | ||
|
|
||
| 在项目入口文件`app.js`中，针对 scss 懒加载，需要引入以下配置代码： | ||
|
|
||
| ```javascript | ||
| import "style-loader/lib/addStyles"; | ||
| import "css-loader/lib/css-base"; | ||
| ``` | ||
|
|
||
| 剩下我们先设置背景色为红色，在用户点击鼠标后，懒加载`common.scss`，使背景色变为绿色。剩余代码如下： | ||
|
|
||
| ```javascript | ||
| import "./scss/base.scss"; | ||
|
|
||
| var loaded = false; | ||
| window.addEventListener("click", function() { | ||
| if (!loaded) { | ||
| import(/* webpackChunkName: 'style'*/ "./scss/common.scss").then(_ => { | ||
| // chunk-name : style | ||
| console.log("Change bg-color of html"); | ||
| loaded = true; | ||
| }); | ||
| } | ||
| }); | ||
| ``` | ||
|
|
||
| ### 4. 打包和引入 | ||
|
|
||
| 根据我们在`app.js`中的`webpackChunkName`的配置，可以猜测，打包结果中有：`style.chunk.js` 文件。 | ||
|
|
||
| 命令行执行`webpack`打包后，`/dist/`目录中的打包结果如下： | ||
|
|
||
|  | ||
|
|
||
| 最后，我们需要在 html 代码中引入打包结果中的、**非懒加载**的样式(`/dist/app.min.css`)和 js 文件(`/dist/app.bundle.js`)。 | ||
|
|
||
| ```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>Document</title> | ||
| <link rel="stylesheet" href="./dist/app.min.css" /> | ||
| </head> | ||
| <body> | ||
| <script src="./dist/app.bundle.js"></script> | ||
| </body> | ||
| </html> | ||
| ``` | ||
|
|
||
| _终_ |
Oops, something went wrong.