Webpack 从0开始
Webpack
Docs
https://webpack.github.io/docs/?utm_source=github&utm_medium=readme&utm_campaign=trdr
Webpack可以做什么
- 支持CMD AMD (Gulp还需要browserify才能CMD)
- 模块加载器 插件机制 (典型的模块加载器babel-loader)
- 可以通过配置打包成多个文件 (充分利用浏览器缓存功能)
- 样式 图片等静态资源都可以视作模块 (任何的文件都能被 require)
- 内置source-map
第一个例子
首先npm install -g webpack
和Gulp一样 有一个入口执行文件 webpack.config.js
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
}
};
如何运行它
$ webpack // 最基本的启动webpack方法
$ webpack -w // 提供watch方法,实时进行打包更新(包括被依赖的文件的改动)
$ webpack -p // 对打包后的文件进行压缩,提供production
$ webpack -d // 提供source map,方便调试
sourcemap对应的文件将会在 webpack:// 下面的一个 . 目录中
ES6
想要把ES6转为ES5 需要babel
当然Gulp也有babel 为什么网上都是webpack呢
对于import export这种 babel后会是 require(...)
浏览器是不认识require的 若用gulp还要再用browserify
但是wepack可以直接把require编译为浏览器可执行的语句
webpack.config.js
module.exports = {
// entry: './main.jsx', //不能直接写main.jsx //当前目录下必须加上 ./ //否则提示找不到文件
entry: './f2.js',
output: {
filename: 'bundle.js'
},
module: {
loaders:[
{ test: /\.js[x]?$/, exclude: /node_modules/, loader: 'babel-loader' },
]
}
};
f2.js
import f1 from './f1.js';
console.log(f1.generateRandom());
f1.js
function generateRandom() {
return Math.random();
}
function sum(a, b) {
return a + b;
}
export default {
generateRandom:generateRandom,
sum:sum
}
什么是Loader
Loader就是一个使你的资源经过一定transform变成新资源的东东(好吧 这个翻译很糟糕)
Loaders are transformations that are applied on a resource file of your app. They are functions (running in node.js) that take the source of a resource file as the parameter and return the new source.
url-loader
和file-loader类似 能够返回一个文件的路径
文件size 小于limit的 将返回文件的data-url
css-loader style-loader
style-loader是用于加载css文件的
css-loader是将css中的 import url 之类翻译为成require
http://stackoverflow.com/questions/25472908/is-the-webpack-style-loader-meant-to-load-all-css-or-just-application-specific
css还是建议使用html引入的方式
现代浏览器会先加载css并解析, 用html来引入css而不是bundle.js引入 页面加载更快
且对于base.css 浏览器可以缓存
html-loader
用于load模板html文件
比如var domTmp = require('./dom.tpl.html');