-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathknowledge.txt
161 lines (142 loc) · 5.85 KB
/
knowledge.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
webpack:
模块加载器兼打包工具，能够将各种资源文件(JS/JSX、coffee、css/sass/less、图片等作为模块来使用处理)。
学习网址：www.w2c.com/Article/50764
解释：
将所需引用的各类文件打包，利用common.js等其他方式集合至一个js文件中，html引入该js文件将自动引用打包的文件内容；主要使用require(XXX)的形式引入模块；目前很多框架，例如react.js、phoneGap都使用此种方式。
*优势：
*webpack是以commonJS的形式书写脚本，支持AMD/CMD，方便旧代码迁移。
*备注(AMD是RequireJS在推广过程中对模块定义的规范化产出；CMD是SeaJS在推广过程中对模块定义的规范化产出；类似的还有CommonJS Modules/2.0规范——>BravoJS推广过程中的产出；AMD提前执行依赖前置，CMD延迟执行 依赖就近)
*能被模块化的不仅是JS
*可替代部分grunp/gulp工作
*扩展性强，如React的热插拔
例如：兼容CommonJS的写法
define(function(require,exports,module){
var someModule = require("someModule");
var anotherModile = require("anotherModule");
someModule.doTehAwesome();
anotherModule.doMoarAwesome();
exports.asplode = function(){
someModule.doTehAwesome();
anotherModule.doMoarAwesome();
};
});
**安装和配置(npm 形式安装)
*安装：npm install webpack -g
npm init
npm install webpack --save-dev
*配置：每个项目下有一个webpack.config.js来作为配置项
示例：
var webpack = require('webpack');
var commonsPlugin = new webpack.optimize. CommonsChunkPlugin('common.js');
module.exports = {
//插件项
plugins: [commonsPlugin],
//页面入口文件配置
entry: {
index : './src/js/page/index.js'
},
//入口文件输出配置
output: {
path: 'dist/js/page',
filename: '[name].js'
},
module: {
//加载器配置
loaders: [
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.js$/, loader: 'jsx-loader?harmony' },
{ test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
]
},
//其它解决方案配置
resolve: {
root: 'E:/github/flux-example/src', //绝对路径
extensions: ['', '.js', '.json', '.scss'],
alias: {
AppStore : 'js/stores/AppStores.js',
ActionType : 'js/actions/ActionType.js',
AppAction : 'js/actions/AppAction.js'
}
}
};
&&解释：
1.plugins是插件项，这里使用CommonChunkPlugin的插件，用于提取多个文件脚本，生成一个common.js来方便多页面之间的进行复用；
2.entry是页面入口文件配置，output是对应输出项配置大致语法如下：
{
entry: {
page1: "./page1",
//支持数组形式，将加载数组中的所有模块，但以最后一个模块作为输出
page2: ["./entry1", "./entry2"]
},
output: {
path: "dist/js/page",
filename: "[name].bundle.js"
}
}
page1为合成后的模块名称,output输出时的[name]即为该名称文件，path为存放文件路径
3.module.loaders是最关键的配置，告知每个文件需要使用何种加载器来处理
module: {
//加载器配置
loaders: [
//.css 文件使用 style-loader 和 css-loader 来处理
{ test: /\.css$/, loader: 'style-loader!css-loader' },
//.js 文件使用 jsx-loader 来编译处理
{ test: /\.js$/, loader: 'jsx-loader?harmony' },
//.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理
{ test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
//图片文件使用 url-loader 来处理，小于8kb的直接转为base64
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
]
}
"-loader"可以省略；配置信息的参数?limit = 8192表示为所有小于8kb图片都转为base64形式(其实应该说超过8kbb的才使用url-loader来映射到文件)
4.resolve配置：
resolve: {
//查找module的话从这里开始查找
root: 'E:/github/flux-example/src', //绝对路径
//自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
extensions: ['', '.js', '.json', '.scss'],
//模块别名定义，方便后续直接引用别名，无须多写长长的地址
alias: {
AppStore : 'js/stores/AppStores.js',//后续直接 require('AppStore') 即可
ActionType : 'js/actions/ActionType.js',
AppAction : 'js/actions/AppAction.js'
}
}
*运行webpack
*webpack --display-error-details
-->方便出错时能查阅更详细的信息
其他主要参数：
$ webpack --config XXX.js //使用另一份配置文件（比如webpack.config2.js）来打包
$ webpack --watch //监听变动并自动打包
$ webpack -p //压缩混淆脚本，这个非常非常重要！
$ webpack -d //生成map映射文件，告知哪些模块被最终打包到哪里了
*模块引入
*HTML引入方式
<body>
<script src="../dist/js/page/common.js"></script>
<script src="../dist/js/page/index.js"></script>
</body>
备注：index.js为编译好 webpack打包的js入口文件
*JS
index.js:
require('../../css/reset.scss'); //加载初始化样式
require('../../css/allComponent.scss'); //加载组件样式
var React = require('react');
var AppWrap = require('../component/AppWrap'); //加载组件
var createRedux = require('redux').createRedux;
var Provider = require('redux/react').Provider;
var stores = require('AppStore');
var redux = createRedux(stores);
var App = React.createClass({
render: function() {
return (
<Provider redux={redux}>
{function() { return <AppWrap />; }}
</Provider>
);
}
});
React.render(
<App />, document.body
);