开发和生产环境

swimly · Mar 30, 2017 · 2631ae5 · 2631ae5
1 parent c701b7d
commit 2631ae5
Show file tree

Hide file tree

Showing 10 changed files with 109 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -504,6 +504,8 @@ rules: [
   {test: /\.pug$/, use: ['html-loader', 'pug-html-loader']}
 ]
 ```
+具体参考： [https://webpack.js.org/guides/hmr-react/](https://webpack.js.org/guides/hmr-react/)
+
 最终的webpack.config.js如下所示：
 ``` javascript
 var HtmlWebpackPlugin = require('html-webpack-plugin');
@@ -662,4 +664,83 @@ npm install --save-dev cross-env
 然后修改package.json
 ```
 "prod": "npm run clean && cross-env NODE_ENV=production webpack -p",
-```
+```
+最终webpack.config.js如下所示：
+``` javascript
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+var path = require('path')
+var webpack = require('webpack')
+var isProduction = process.env.NODE_ENV === 'production';
+var scssDev = ['style-loader', 'css-loader', 'sass-loader'];
+var cssDev = ['style-loader', 'css-loader'];
+var scssProd = ExtractTextPlugin.extract({
+  fallback: 'style-loader',
+  loader: ['css-loader', 'sass-loader'],
+  publicPath: '/dist'
+});
+var cssProd = ExtractTextPlugin.extract({
+  fallback: 'style-loader',
+  loader: ['css-loader'],
+  publicPath: '/dist'
+});
+var scssConfig = isProduction ? scssProd : scssDev;
+var cssConfig = isProduction ? cssProd : cssDev;
+
+module.exports = {
+  entry: {
+    app: './src/app.js',
+    contact: './src/contact.js'
+  },
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: '[name].bundle.js'
+  },
+  module: {
+    rules: [
+      {test: /\.css$/, use: cssConfig},
+      {test: /\.scss$/, use: scssConfig},
+      {test: /\.pug$/, use: ['html-loader', 'pug-html-loader']}
+    ]
+  },
+  devServer: {
+    contentBase: path.join(__dirname, 'dist'),
+    compress: true,
+    port: 8080,
+    stats: 'errors-only',
+    hot: true,
+    open: true // 启动后自动打开浏览器窗口
+  },
+  plugins: [
+    new ExtractTextPlugin({
+      filename:  (getPath) => {
+        return getPath('css/[name].css').replace('css/js', 'css');
+      },
+      disable: !isProduction,
+      allChunks: true
+    }),
+    new HtmlWebpackPlugin({
+      title: 'myApp',
+      // minify: {
+      //   collapseWhitespace: true //生成被压缩的html文件
+      // },
+      hash: true,
+      filename: './index.html',
+      excludeChunks: ['contact'],
+      template: './src/index.pug', // Load a custom template (ejs by default see the FAQ for details)
+    }),
+    new HtmlWebpackPlugin({
+      title: 'contact',
+      hash: true,
+      filename: 'contact.html',
+      chunks: ['contact'],
+      template: './src/contact.html'
+    }),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NamedModulesPlugin()
+  ]
+}
+```
+最终效果如下：
+
+<img src="book/13.gif"/>
diff --git a/book/13.gif b/book/13.gif
diff --git a/dist/app.bundle.js b/dist/app.bundle.js
diff --git a/dist/contact.bundle.js b/dist/contact.bundle.js
diff --git a/dist/contact.html b/dist/contact.html
@@ -8,5 +8,5 @@
 </head>
 <body>
   <h1>This is contact!</h1>
-<script type="text/javascript" src="contact.bundle.js?1f7751cf1f1e031b6ed0"></script></body>
+<script type="text/javascript" src="contact.bundle.js?3c654bb443e909e12e33"></script></body>
 </html>
diff --git a/dist/css/app.css b/dist/css/app.css
diff --git a/dist/index.html b/dist/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><title></title><link href="css/app.css?1f7751cf1f1e031b6ed0" rel="stylesheet"></head><body><h1>this is the header</h1><h1>Pug - node template engine</h1><div class=col id=container><p>Get on it!</p><p>Pug is a terse and simple templating language with a strong focus on performance and powerful features.</p></div><script type="text/javascript" src="app.bundle.js?1f7751cf1f1e031b6ed0"></script></body></html>
+<!DOCTYPE html><html lang=en><head><title></title><link href="css/app.css?3c654bb443e909e12e33" rel="stylesheet"></head><body><h1>this is the header</h1><h1>Pug - node template engine</h1><div class=col id=container><p>Get on it!</p><p>Pug is a terse and simple templating language with a strong focus on performance and powerful features</p></div><script type="text/javascript" src="app.bundle.js?3c654bb443e909e12e33"></script></body></html>
diff --git a/src/app.css b/src/app.css
@@ -1,2 +1,2 @@
-h1,h2{font-weight:normal;font-size:30px;color:#F2F7FA;text-align:center;}
-p{font-size:18px;}
+h1,h2{font-weight:normal;font-size:22px;color:#F2F7FA;text-align:center;}
+p{font-size:14px;}
diff --git a/src/main.scss b/src/main.scss
@@ -1,7 +1,8 @@
 body{
   color:#fff;
   background:#007ACC;
-  font-size:50px;
+  max-width:1200px;
+  margin:0 auto;
   h1{
     font-weight:normal;
   }
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!DOCTYPE html><html lang=en><head><title></title><link href="css/app.css?1f7751cf1f1e031b6ed0" rel="stylesheet"></head><body><h1>this is the header</h1><h1>Pug - node template engine</h1><div class=col id=container><p>Get on it!</p><p>Pug is a terse and simple templating language with a strong focus on performance and powerful features.</p></div><script type="text/javascript" src="app.bundle.js?1f7751cf1f1e031b6ed0"></script></body></html>
		<!DOCTYPE html><html lang=en><head><title></title><link href="css/app.css?3c654bb443e909e12e33" rel="stylesheet"></head><body><h1>this is the header</h1><h1>Pug - node template engine</h1><div class=col id=container><p>Get on it!</p><p>Pug is a terse and simple templating language with a strong focus on performance and powerful features</p></div><script type="text/javascript" src="app.bundle.js?3c654bb443e909e12e33"></script></body></html>