前言
真快呀，過年的時候才對webpack 1的了點感性認識，就做了兩個關于Vue的項目，之后就出了webpack 2，怕來不及記錄，所以寫這篇文章來記錄一下Webpack 2。
Webpack概述
webpack is a module bundler for modern JavaScript applications.
上述是來自官方文檔的定義，說白了就是webpack = module bundler(加載器)，對于webpack來說，所有的文件都是模塊，只是處理的方式不一樣罷了。
說道學習webpack的難易程度：
It is incredibly configurable, but to get started you only need to understand Four Core Concepts: entry, output, loaders, and plugins.
官網說：「很容易的，只要理解了entry、output、loaders、plugins這四個核心概念，你就入門了！」
所以要好好學英語呀，當然還有一些cli/nodeJS的知識。
webpack配置文件
要想使用webpack，其根目錄下會有一個webpack.config.js的文件,大概是這樣：
// webpack.config.js
var webpack = require("webpack");
var DefinePlugin = require('webpack/lib/DefinePlugin');
module.exports = {
context:process.cwd(),
watch: true,
entry: './index.js',
devtool: 'source-map',
output: {
path: path.resolve(process.cwd(),'dist/'),
filename: '[name].js'
},
resolve: {
alias:{ jquery: process.cwd()+'/src/lib/jquery.js', }
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
_: 'underscore',
React: 'react'
}),
new DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('development')
}
})
],
module: {
loaders: [{
test: /\.js[x]?$/,
exclude: /node_modules/,
loader: 'babel-loader'
}, {
test: /\.less$/,
loaders:['style-loader', 'css-loader','less-loader']
}, {
test: /\.(png|jpg|gif|woff|woff2|ttf|eot|svg|swf)$/,
loader: "file-loader?name=[name]_[sha512:hash:base64:7].[ext]"
}, {
test: /\.html/,
loader: "html-loader?" + JSON.stringify({minimize: false })
} ]
}
};
這個簡單的webpack配置文件，基本可以處理大多數的前端業務場景了。
解讀webpack配置文件
講解內容還是以一個Github項目為主：地址
四個核心概念
1. entry
entry就是整個模塊的讀取入口，根據webpack 2的文檔，對entry值有了更多的拓展
let base ='./index.js'
//let base = {
// index:'./index.js',
// index1:'./index1.js'
//};
// webpack2 提供了多種配置方案 https://webpack.js.org/configuration/entry-context/#entry
// const dynamic_entry = ()=>base;
// const dynamic_entry_promise=()=>{
// return new Promise((resolve,reject)=>{
// resolve(base)
// })
// }
module.exports = {
entry:base,
output: {
filename: '_[name].js'
}
};
2. output
output這個對象的設置告訴webpack怎樣的放置導出的文件。
//文檔 https://webpack.js.org/configuration/output/
const path =require('path');
let base = {
index:'./index.js',
index1:'./index1.js'
};
module.exports = {
entry:base,
output: {
// 設置導出模塊 使用絕對路徑
path: path.resolve(__dirname, 'dist'),
// 使用 on-demand-loading 或者加載其余的資源如：圖片、文件等
// 起了服務器，設置關于導出文件目錄 公共的路徑（URL）
publicPath: "/output/dist/",
// 設置包規范格式（寫一些模塊給別人用，設置過后會根據所給類型打包源碼 也有amd cmd的規范）
libraryTarget:'umd',
// 給自己的庫起的名字，跟amd規范里difine的中的第一個參數一樣
library: "MyLibrary",
// 除entry以外的那些需要加載的文件命名
// chunkhash => webpack對每一個文件編譯產生的hash
chunkFilename:'[chunkhash]_[name].js',
// hash值的設置
hashDigestLength:3,
// 導出文件名
// hash ==> webpack編譯過程產生的hash值
filename: '[hash]_[name].js'
}
};
3. modules/loaders
對每一個不同文件的處理方式的設定
//webpack 1的寫法
module: {
loaders: [{
test: /\.js[x]?$/,
exclude: /node_modules/,
loader: 'babel-loader'
}]
}
// webpack 2的寫法
module:{
rules:[
{
// 是Rule.resource.test的簡寫
// 作用就是檢測condition是否匹配這個resource query
// 是就使用loader編譯，反之不用，僅僅是預處理
test: /\.jsx?$/,
// rule.use是數組形式和rule.loaders是它的別名
use:[{
loader: "babel-loader",
}]
},
]
}
4. plugins
plugin是Webpack構建過程中的個性化的處理設置。其中有一些自帶的插件。參考文檔
plugins: [
// 自帶的壓縮代碼的插件
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
這一部分，不知如何講好，找了一些文檔來輔助，輔助文檔
以上是核心的四個概念和部分常用配置參數的講解。
5. resolve
These options change how modules are resolved.
resolve.alias的作用就是對module模塊提供別名，和require里的path參數有相似的作用。（可以將一些需要多次引用的模塊改成一些東西）
resolve:{
alias:{
jquery :path.resolve(__dirname,'/src/lib/jquery.js')
}
}
6. devtool
這個是大招了，可以讓我們在瀏覽器的調試工具調試的是否是源碼。
如果想要顯示源碼，就用devtool:source-map
module.exports = {
// https://webpack.js.org/configuration/devtool/#devtool
devtool:'source-map',
// https://webpack.js.org/configuration/target/#target
target:"web",
entry:"./index.js",
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
};
文章只是對webpack一些參數進行了講解
