Plugin的使用

4c8c16dd · shangbj · 252f9e73 · 4c8c16dd · 4c8c16dd · 4c8c16dd
Commit 4c8c16dd authored Jun 07, 2018 by shangbj
9 changed files
--- a/1-5/dist/bundle.js
+++ b/1-5/dist/bundle.js
+!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=3)}([function(e,t){e.exports=function(e){document.getElementById("app").innerText="hello"+e}},,function(e,t,n){},function(e,t,n){n(2),n(0)("Plugin")}]);
\ No newline at end of file
--- a/1-5/dist/main_5e3244d1.css
+++ b/1-5/dist/main_5e3244d1.css
+#app{
+    text-align: center
+}
--- a/1-5/index.html
+++ b/1-5/index.html
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <link rel="stylesheet" href="./dist/main_5e3244d1.css"/>
+    </head>
+    <body>
+        <div id="app"></div>
+        <script src="./dist/bundle.js"></script>
+    </body>
+</html>
\ No newline at end of file
--- a/1-5/main.css
+++ b/1-5/main.css
+#app{
+    text-align: center
+}
\ No newline at end of file
--- a/1-5/main.js
+++ b/1-5/main.js
+require('./main.css')
+const show = require('./show');
+
+show('Plugin')
\ No newline at end of file
--- a/1-5/package-lock.json
+++ b/1-5/package-lock.json
--- a/1-5/package.json
+++ b/1-5/package.json
+{
+  "name": "1-5",
+  "version": "1.0.0",
+  "description": "",
+  "main": "main.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "css-loader": "^0.28.11",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
+    "mini-css-extract-plugin": "^0.4.0",
+    "webpack": "^4.11.1",
+    "webpack-cli": "^3.0.3"
+  }
+}
--- a/1-5/show.js
+++ b/1-5/show.js
+function show(txt){
+    document.getElementById('app').innerText = 'hello'+ txt;
+}
+
+module.exports =  show;
\ No newline at end of file
--- a/1-5/webpack.config.js
+++ b/1-5/webpack.config.js
+const path = require('path');
+// const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+
+module.exports ={
+    entry:'./main.js',
+    output:{
+        filename:'bundle.js',
+        path:path.resolve(__dirname,'./dist'),
+    },
+    module:{
+        rules:[
+            {
+                test:/\.css$/,
+                use:[
+                    MiniCssExtractPlugin.loader,
+                    'css-loader'
+                ]
+            }
+        ]
+    },
+    plugins:[
+        new MiniCssExtractPlugin({
+            //从js中提取.css文件的命名
+            filename:`[name]_[contenthash:8].css`,
+        })
+    ]
+}
\ No newline at end of file