添加 06-加载CSS

hao-kuai · Jul 17, 2019 · 90b5527 · 90b5527
1 parent 98074ab
commit 90b5527
Show file tree

Hide file tree

Showing 9 changed files with 3,114 additions and 0 deletions.
diff --git a/06-加载 CSS/README.md b/06-加载 CSS/README.md
@@ -0,0 +1,47 @@
+使用以下命令运行本地webpack不是特别方便,
+
+```
+npx webpack
+//或者
+npx webpack --config webpack.config.js
+```
+可以设置使用快捷方式：[npm scripts](https://docs.npmjs.com/misc/scripts)
+
+## 一、 添加 npm scripts
+编辑 package.json 文件，添加在 npm scripts 中添加一个 npm 命令：
+```
+{
+  "name": "demo02",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "devDependencies": {
+    "webpack": "^4.35.3",
+    "webpack-cli": "^3.3.6"
+  },
+  "scripts": {
+    "build": "webpack",
+    "goujian": "webpack",
+    "build_config": "webpack --config webpack.config.js"
+  }
+}
+```
+
+其中 build 是 指令名称，根据需要自定义即可；webpack 是重要的指令，不能写错。
+
+## 二、 使用 npm scripts
+在控制台中输入指令，即可生成 main.js 文件。
+
+```
+npm run build
+//或者
+yarn build
+```
+
+打开index.html文件即可看到 Hello webpack 字样。
+> 每次执行指令前，需要手动删除 dist 路径下的 main.js 文件
+
+> 参考链接
+
+- [webpack起步](https://webpack.docschina.org/guides/getting-started/)
+- [示例代码](https://github.com/1071942338/WebpackStudyNotes/tree/master/05-%E4%BD%BF%E7%94%A8%20npm%20scripts)
diff --git a/06-加载 CSS/demo06/Readme.md b/06-加载 CSS/demo06/Readme.md
@@ -0,0 +1 @@
+进入package.json所在目录执行 npm i 或者yarn 命令即可安装依赖
diff --git a/06-加载 CSS/demo06/dist/bundle.js b/06-加载 CSS/demo06/dist/bundle.js
diff --git a/06-加载 CSS/demo06/dist/index.html b/06-加载 CSS/demo06/dist/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>06-加载CSS</title>
+</head>
+<body>
+<script src="bundle.js"></script>
+</body>
+</html>
diff --git a/06-加载 CSS/demo06/package.json b/06-加载 CSS/demo06/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "demo02",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "devDependencies": {
+    "css-loader": "^3.0.0",
+    "style-loader": "^0.23.1",
+    "webpack": "^4.35.3",
+    "webpack-cli": "^3.3.6"
+  },
+  "scripts": {
+    "build": "webpack"
+  }
+}
diff --git a/06-加载 CSS/demo06/src/index.js b/06-加载 CSS/demo06/src/index.js
@@ -0,0 +1,11 @@
+import "./style.css"
+//生成一个内容为Hello webpack !的div标签
+function component() {
+    let element = document.createElement('div');
+    element.innerHTML = "Hello webpack !";
+    //添加class
+    element.classList.add("hello");
+    return element;
+}
+//将生成的div标签添加到body中去
+document.body.appendChild(component());
diff --git a/06-加载 CSS/demo06/src/style.css b/06-加载 CSS/demo06/src/style.css
@@ -0,0 +1,3 @@
+.hello{
+    color: red;
+}
diff --git a/06-加载 CSS/demo06/webpack.config.js b/06-加载 CSS/demo06/webpack.config.js
@@ -0,0 +1,20 @@
+const path = require('path');
+
+module.exports = {
+    entry: './src/index.js',
+    output: {
+        filename: 'bundle.js',
+        path: path.resolve(__dirname, 'dist')
+    },
+    module:{
+        rules:[
+            {
+                test:/\.css$/,
+                use:[
+                    "style-loader",
+                    "css-loader"
+                ]
+            }
+        ]
+    }
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		进入package.json所在目录执行 npm i 或者yarn 命令即可安装依赖