webpack 入門教程

Webpack 是一個模塊打包器。它將根據模塊的依賴關係進行靜態分析，而後將這些模塊按照指定的規則生成對應的靜態資源。

webpack是更優秀的模塊依賴管理工具， require.js的全部功能它都有,並且它不須要寫define定義模塊，一切都是智能的。編繹過程更快，Webpack 使用異步 I/O 和多級緩存提升運行效率，這使得 Webpack 可以以使人難以置信的速度快速增量編譯。 他在不少地方能替代 Grunt 跟 Gulp 由於他可以編譯打包 CSS, 作 CSS 預處理, 編譯 JS 方言, 打包圖片, 還有其餘一些. Webpack能夠把任何資源當作模塊，包括js文件，json文件,html文件，圖片視頻資源等。

1.安裝

npm install -g webpack

 

2.使用

方法1：cli 下直接 webpack source.js dist.js就能夠將source.js 編譯成dist.js

方法2：使用配置文件

貼上個人配置文件 webpack.config.js

module.exports = {
entry: {
vendor: "./vendor.js",
src : "./entry.js"
},
output: {
path: 'build',
filename: "[name].js"
},
module: {
loaders: [
{test: /\.js$/, loader:'babel', exclude: /(node_modules|bower_components)/, query:{presets:['es2015']}},
{ test: /\.css$/, loader: "style!css" },
{ test: /\.html$/, loader: "html"},
{test: /\.(png|jpg)$/, loader: 'url-loader?limit=28192'},

]
}
};

推薦你們安裝了webpack就把經常使用的loader安裝上，會少出不少問題

bable安裝必須注意下

npm install babel-loader babel-core babel-preset-es2015 --save-dev    

若是須要把es6轉換爲es5,能夠使用    {test: /\.js$/, loader:'babel', exclude: /(node_modules|bower_components)/, query:{presets:['es2015']}},

 

官網loader-list

http://webpack.github.io/docs/list-of-loaders.html

 

其餘使用正在摸索中。。。