解析ES6

yangfan19 · yangfan19 · commit 993ac1aedd88 · 2021-03-14T18:02:04.000+08:00
diff --git a/webpack-03/.babelrc b/webpack-03/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env"]
+}
diff --git a/webpack-03/README.md b/webpack-03/README.md
@@ -1,6 +1,9 @@
 # webpack-03
 
-## loaders的使用
+## 解析ES6
+
+————
+### loaders和的Plugins使用
 ————
 #### 日常使用的loader
 
@@ -15,4 +18,24 @@ raw-lodder    // 将文件已字符串的形式导入
 thead-lodder    // 多进程打包JS和css
 ```
 
+### Plugins的使用
+————
+#### 日常使用的Plugins
+
+```shell
+CommonsChunkPlugin   // 将chunks相同的模块代码提取成公共的js
+CleanWebpackPlugin    // 清理构建目录
+ExtractTextWebpackPlugin    // 将css从bunlde文件里提取到一个独立的css文件
+CopyWebpackPlugin    // 将文件或者文件夹拷贝到构建的输出目录
+HtmlWebpackPlugin    // 创建html文件去承载输出到bundle
+UglifyjsWebpackPligin    // 压缩JS
+ZipWebpackPlugin    // 将打包出的资源生成一个zip的包
+```
+
+————
+## loader和 Plugins的区别？
+
+loader不能做的事情Plugin都能干
+
+
 
diff --git a/webpack-03/package-lock.json b/webpack-03/package-lock.json
diff --git a/webpack-03/package.json b/webpack-03/package.json
@@ -11,6 +11,9 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "@babel/core": "^7.13.10",
+    "@babel/preset-env": "^7.13.10",
+    "babel-loader": "^8.2.2",
     "webpack": "^4.31.0",
     "webpack-cli": "^3.3.2"
   }
diff --git a/webpack-03/src/helloWorld.js b/webpack-03/src/helloWorld.js
@@ -0,0 +1,3 @@
+export function helloworld() {
+  return 'Hello webpack';
+}
diff --git a/webpack-03/src/index.js b/webpack-03/src/index.js
@@ -0,0 +1,3 @@
+import { helloworld } from './helloWorld';
+
+document.write(helloworld());
diff --git a/webpack-03/src/search.js b/webpack-03/src/search.js
@@ -0,0 +1 @@
+document.write('search文件');
diff --git a/webpack-03/webpack.config.js b/webpack-03/webpack.config.js
@@ -3,10 +3,22 @@
 const path = require('path');
 
 module.exports = {
-  entry: './src/index.js',
+  entry: {
+    // 入口文件可以用对象的形式来写
+    index: './src/index.js',
+    search: './src/search.js',
+  },
   output: {
     path: path.join(__dirname, 'dist'),
-    filename: 'bundle.js',
+    filename: '[name].js', // 多个入口的情况下 不知道对应的名称、可以用占位符来指定[name]
   },
   mode: 'production',
+  module: {
+    rules: [
+      {
+        test: /.js$/,
+        use: 'babel-loader',
+      },
+    ],
+  },
 };

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "presets": ["@babel/preset-env"]`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export function helloworld() {`
	`2`	`+ return 'Hello webpack';`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import { helloworld } from './helloWorld';`
	`2`	`+`
	`3`	`+document.write(helloworld());`