webpack是什么
Webpack 是一個模塊打包器。它將根據模塊的依賴關系進行靜態分析，然后將這些模塊按照指定的規則生成對應的靜態資源。
百度網盤視頻下載：
http://pan.baidu.com/s/1jIPJucu
基本命令
webpack // 最基本的啟動webpack的方法 （例子：webpack index.js bundle.js ----index.js 打包的入口文件路徑；bundle.js 打包后的輸出文件名）
webpack -w // 提供watch方法；實時進行打包更新
webpack -p // 對打包后的文件進行壓縮
webpack -d // 提供source map，方便調式代碼
全局安裝
# npm install webpack -g //利用npm安裝全局模塊webpack；
【 注意：安裝完后使用webpack，若提示安裝webpeck-cli，則需全局安裝： npm i webpack-cli -g 】
項目安裝：
- # 進入項目目錄
- # 確定已經有 package.json，沒有就通過 npm init 創建
- # 安裝 webpack 依賴
- # npm install webpack --save-dev //本地安裝並寫入package.json的“devDependencies”中；
使用ES6
安 裝 babel-loader：
# npm install babel-loader --sa ve-dev //安裝並寫入package.json的“devDependencies”中；
安裝轉碼規則：
# npm install babel-preset-es2015 --save-dev ES7不同階段語法提案的轉碼規則（共有4個階段），選裝一個 # npm install --save-dev babel-preset-stage-0 # npm install --save-dev babel-preset-stage-1 # npm install --save-dev babel-preset-stage-2 # npm install --save-dev babel-preset-stage-3
參考格式：
{
test: /\.js$/,
loader: 'babel?presets[]=es2015,presets[]=stage-0'
}
編譯css
安裝css-loader：
# npm install css-loader --save-dev
安裝style-loader
# npm install style-loader --save-dev
參考格式：
{
test: /\.css$/,
loaders: ['style', 'css', 'autoprefixer']
}
編譯less
# npm install less --save-dev 安裝less-loader： # npm install less-loader --save-dev
參考格式：
{
test: /\.less/,
loaders: ['style', 'css', 'autoprefixer', 'less'],
}
使用autoprefixer自動補上瀏覽器兼容
# npm install autoprefixer-loader --save-dev
參考格式：
{
test: /\.css$/,
loaders: ['style', 'css', 'autoprefixer']
}, {
test: /\.less/,
loaders: ['style', 'css', 'autoprefixer', 'less'],
}
編譯文件
安裝file-loader：
# npm install file-loader --save-dev
參考格式：
{
test: /\.(eot|woff|svg|ttf|woff2|gif)(\?|$)/,
loader: 'file-loader?name=[hash].[ext]'
}
編譯圖片
# npm install url-loader --save-dev
參考格式：
{
test: /\.(png|jpg)$/,
loader: 'url?limit=1200&name=[hash].[ext]'
}
編譯JSX
# npm install jsx-loader --save-dev # npm install babel-preset-react --save-dev
參考格式：
{
test: /\.jsx$/,
loaders: ['jsx', 'babel?presets[]=es2015,presets[]=stage-0,presets[]=react']
}
示例源碼
在項目目錄下，新建一個webpack.config.js文件，把下面代碼復制進去，然后在新建一個app.js和index.js文件，寫上console.log('你好世界');執行命令：webpack 然后找到build目錄就看到編譯后的文件了
//CommonJS的寫法---模塊加載
var webpack = require('webpack'); //導出一個對象
module.exports = { entry: { app: './app', //編譯的入口文件
index: './index', //編譯的入口文件
}, output: { publicPath: '/build/', //服務器根路徑
path: './build', //編譯到當前目錄（輸出目錄）
filename: '[name].js' //編譯后的文件名字
}, module: { loaders: [{ test: /\.js$/, loader: 'babel?presets=es2015' }, { test: /\.css$/, loaders: ['style', 'css', 'autoprefixer'] }, { test: /\.less/, loaders: ['style', 'css', 'autoprefixer', 'less'], }, { test: /\.(eot|woff|svg|ttf|woff2|gif)(\?|$)/, loader: 'file-loader?name=[hash].[ext]' }, { test: /\.(png|jpg)$/, loader: 'url?limit=1200&name=[hash].[ext]' //注意后面那個limit的參數，當你圖片大小小於這個限制的時候，會自動啟用base64編碼圖片
} ] }, plugins: [ new webpack.optimize.CommonsChunkPlugin('common.js') //將公用模塊，打包進common.js
], resolve: { extensions: ['', '.js', '.jsx'] //后綴名自動補全
} };