Skip to content

Commit c701b7d

Browse files
swimlyswimly
committed
完善局部刷新
1 parent 9159306 commit c701b7d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+1830
-24
lines changed

‎README.md

Lines changed: 95 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -568,4 +568,98 @@ module.exports = {
568568
这时候再启动项目
569569

570570
<img src="book/12.gif"/>
571-
#### 8、生产和发布
571+
#### 8、生产和发布
572+
573+
修改package.json
574+
``` json
575+
"scripts": {
576+
"test": "echo \"Error: no test specified\" && exit 1",
577+
"dev": "webpack-dev-server",
578+
"prod": "npm run clean && NODE_ENV=production webpack -p",
579+
"clean": "rimraf ./dist/*"
580+
},
581+
```
582+
webpack.config.js
583+
``` javascript
584+
var HtmlWebpackPlugin = require('html-webpack-plugin');
585+
const ExtractTextPlugin = require("extract-text-webpack-plugin");
586+
var path = require('path')
587+
var webpack = require('webpack')
588+
var isProd = process.env.NODE_ENV = 'production';
589+
var cssDev = ['style-loader', 'css-loader', 'sass-loader'];
590+
var cssProd = ExtractTextPlugin.extract({
591+
fallback: 'style-loader',
592+
loader: ['css-loader', 'sass-loader'],
593+
publicPath: '/dist'
594+
})
595+
var cssConfig = isProd ? cssProd : cssDev;
596+
597+
module.exports = {
598+
entry: {
599+
app: './src/app.js',
600+
contact: './src/contact.js'
601+
},
602+
output: {
603+
path: path.resolve(__dirname, 'dist'),
604+
filename: '[name].bundle.js'
605+
},
606+
module: {
607+
rules: [
608+
{test: /\.css$/, use: ['style-loader', 'css-loader']},
609+
{test: /\.scss$/, use: cssConfig},
610+
{test: /\.pug$/, use: ['html-loader', 'pug-html-loader']}
611+
]
612+
},
613+
devServer: {
614+
contentBase: path.join(__dirname, 'dist'),
615+
compress: true,
616+
port: 8080,
617+
stats: 'errors-only',
618+
hot: true,
619+
open: true // 启动后自动打开浏览器窗口
620+
},
621+
plugins: [
622+
new ExtractTextPlugin({
623+
filename: (getPath) => {
624+
return getPath('css/[name].css').replace('css/js', 'css');
625+
},
626+
disable: !isProd,
627+
allChunks: true
628+
}),
629+
new HtmlWebpackPlugin({
630+
title: 'myApp',
631+
// minify: {
632+
// collapseWhitespace: true //生成被压缩的html文件
633+
// },
634+
hash: true,
635+
filename: './index.html',
636+
excludeChunks: ['contact'],
637+
template: './src/index.pug', // Load a custom template (ejs by default see the FAQ for details)
638+
}),
639+
new HtmlWebpackPlugin({
640+
title: 'contact',
641+
hash: true,
642+
filename: 'contact.html',
643+
chunks: ['contact'],
644+
template: './src/contact.html'
645+
}),
646+
new webpack.HotModuleReplacementPlugin(),
647+
new webpack.NamedModulesPlugin()
648+
]
649+
}
650+
```
651+
这时候
652+
``` bash
653+
npm run prod
654+
//会出现如下错误：
655+
'NODE_ENV' 不是内部或外部命令，也不是可运行的程序
656+
或批处理文件。
657+
```
658+
一般如果你是mac，这样写是没有问题的，如果你是跟小编一样的穷逼还用着windows系统这样可就行不通了。
659+
``` bash
660+
npm install --save-dev cross-env
661+
```
662+
然后修改package.json
663+
```
664+
"prod": "npm run clean && cross-env NODE_ENV=production webpack -p",
665+
```

‎dist/app.bundle.js

Lines changed: 7 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/contact.bundle.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/contact.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>contact</title>
8+
</head>
9+
<body>
10+
<h1>This is contact!</h1>
11+
<script type="text/javascript" src="contact.bundle.js?1f7751cf1f1e031b6ed0"></script></body>
12+
</html>

‎dist/css/app.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
body{background:#ff0;color:#fff}

‎dist/css/main.css

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎dist/index.html

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7-
<title>myApp</title>
8-
<link href="css/main.css?eb620e7743b1e773c8e7" rel="stylesheet"></head>
9-
<body>
10-
<p>This is my template</p>
11-
<script type="text/javascript" src="app.bundle.js?eb620e7743b1e773c8e7"></script></body>
12-
</html>
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>

‎node_modules/.bin/cross-env

Lines changed: 15 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎node_modules/.bin/cross-env.cmd

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎node_modules/cross-env/CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)