前端模块加载
两种极端的方式
(1)每个模块文件都单独请求，请求次数过多，应用启动速度慢。
(2)把所有模块打包成一个文件然后只请求一次，导致流量浪费、初始化过程慢。
合理的方式
分块传输，按需进行懒加载，在实际用到某些模块的时候再增量更新
Webpack
Webpack是一个模块打包器。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源
安装webpack
npm install webpack -g
或者加到package.json
npm install webpack --save-dev
# 指定版本
npm install webpack@1.12.x --save-dev
webpack server
npm install webpack-dev-server --save-dev
# 运行
webpack-dev-server --progress --colors
默认配置文件为webpack.config.js
可以改成自定义配置
webpack --config customconfig.js
常见操作
启动
webpack
实时编译
webpack --watch
# 加上进度和颜色
webpack --progress --colors --watch
webpack -p 来针对发布环境编译(压缩代码)
webpack --display-error-details 查看查找过程
webpack -d 来生成 SourceMaps
Webpack配置
// webpack.config.js
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: ['./src/index'], //entry 是指入口文件的配置项
output: { //output是指输出文件的配置项
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false,
},
}),
new webpack.optimize.OccurenceOrderPlugin()
],
module: {
loaders: [{
test: /\.css$/,
loaders: ['style', 'css']
}]
}
}
代码拆分，同步和异步两种加载方式。每一个异步区块作为一个文件打包
对 CommonJS 的 AMD 的语法做了兼容, 方便迁移代码
Loader，将各种类型的资源转换为JavaScript模块
插件系统，webpack插件
loader
通过管道方式链式调用，每个 loader 可以把资源转换成任意格式并传递给下一个 loader ，但是最后一个 loader 必须返回 JavaScript
运行在 node.js 环境中，同步或异步执行
接受参数，以此来传递配置项给 loader
通过文件扩展名（或正则表达式）绑定给不同类型的文件
通过 npm 发布和安装
可以访问配置
按照惯例，而非必须，loader 一般以 xxx-loader 的方式命名，xxx 代表了这个 loader 要做的转换功能，比如 json-loader
安装 loader
npm install css-loader style-loader
压缩 JavaScript
plugins: [
new webpack.optimize.MinChunkSizePlugin(minSize)
]
打包多个包
首先 entry 有多个属性, 对应多个 JavaScript 包，然后 commonsPlugin 可以用于分析模块的共用代码, 单独打一个包出来
// webpack.config.js
var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
module.exports = {
entry: {
Profile: './profile.js',
Feed: './feed.js'
},
output: {
path: 'build',
filename: '[name].js' // Template based on keys in entry above
},
plugins: [commonsPlugin]
};
revision
Option 1: One hash for the bundle
output: {
path: path.join(__dirname, "assets", "[hash]"),
publicPath: "assets/[hash]/",
filename: "output.[hash].bundle.js",
chunkFilename: "[id].[hash].bundle.js"
}
Option 2: One hash per chunk
output: { chunkFilename: "[chunkhash].bundle.js" }
CDN
设置 output.publicPath
功能开关
在开发环境使用(比如 log)，输出日志，模拟数据等等
if (__DEV__) {
console.warn('logging');
}
// webpack.config.js
// definePlugin 接收字符串插入到代码当中, 所以你需要的话可以写上 JS 的字符串
var definePlugin = new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true'))
});
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
plugins: [definePlugin]
};
执行，可添加到package.json
BUILD_DEV=1 webpack
"scripts": {
"dev": "BUILD_DEV=1 webpack",
"build": "BUILD_DEV=0 webpack"
},
