webpack雖然是Facebook專(zhuān)門(mén)為了它的React框架而開(kāi)發(fā)的前端自動(dòng)化工具。但并不是沒(méi)有了React，它就無(wú)法使用。它提出了“一切皆模塊的理念”，因此我們可以把所需要的框架徐裸、類(lèi)庫(kù)、插件甚至是圖片啸盏、CSS重贺、字體等等都引入。它的引入規(guī)范基本符合模塊化規(guī)范：AMD回懦、CMD气笙、UMD、CommonJS等等怯晕。所以即使你之前從未使用過(guò)WebPack潜圃，但它也可以很好的兼容你之前的項(xiàng)目。
安裝
既然要使用舟茶，那就必須要安裝它,前提是你已經(jīng)安裝了nodejs谭期。
npm i webpack -g
之后，我們就需要在項(xiàng)目文件夾下創(chuàng)建一個(gè)文件：webpack.config.js稚晚。
這是默認(rèn)名字,當(dāng)然我們也可以使用修改的文件名崇堵，
基本使用
下面是一段非常簡(jiǎn)單使用：
var webpack = require('webpack');
module.exports = {
entry: './src/index.js', // 入口文件
output: { // 出口文件
path: './build',
publicPath: '/build/',
filename: 'bundle.js' //輸出文件
},
module: { // 操作模塊
loaders: [ //加載器
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader?presets[]=es2015&presets[]=react'
}
}
這段配置實(shí)現(xiàn)的功能就是將js文件中ES6、JSX的語(yǔ)法編譯成es3客燕；
基礎(chǔ)配置
1.webpack的配置文件會(huì)暴露出一個(gè)對(duì)象鸳劳，格式如下：
module.exports = {
//配置項(xiàng)
}
這里使用的就是CommonJS的規(guī)范來(lái)暴露接口。
2.基本屬性
entry:打包的入口文件,通過(guò)html中的script標(biāo)簽直接引入也搓。
output:配置打包文件名赏廓、路徑。
output: { // 出口文件
path: './build',
publicPath: '/build/',
filename: 'bundle.js' //輸出文件
}
fileName:定義輸出文件名傍妒，
path:定義輸出文件路徑
module:定義對(duì)模塊的處理邏輯
module: { // 操作模塊
loaders: [ //加載器
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader?presets[]=es2015&presets[]=react'
}
}
loaders:所有引入的模塊都是通過(guò)這個(gè)配置屬性來(lái)解析
resolve:影響對(duì)模塊的解析
extensions:識(shí)別文件后綴名
plugins:配置插件幔摸。
3.loader
-
babel-loader:js語(yǔ)法解析的加載器；需要配合安裝
“babel-core”:babel的核心
"babel-preset-es2015":按需下載自己需要的解析器
"babel-preset-react":JSx語(yǔ)法解析 - test屬性是使用正則來(lái)匹配文件.
- exclude:可以將不需要編譯的文件排除在外;
{ test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader?presets[]=es2015&presets[]=react'
}
-
sass-loader颤练、css-loader既忆、style-loader：
這三個(gè)配合使用可以將sass文件編譯成css文件并且加載在HTML文件的style標(biāo)簽中。需要注意的是loader加載器是從右到左的順序加載的嗦玖。
{
test: /\.scss$/,
loader: ['style-loader', 'css-loader', 'sass-loader']
}
其中的loader可以縮寫(xiě)成：'style-loader!css-loader!sass-loader'
url-loader:
將圖片文件轉(zhuǎn)換成base64引入;大于限制的自動(dòng)使用file-loader遷入到./images/目錄下患雇，文件名后面追加了8位的hash值;
{
test: /.(png|jpg|gif)$/,
loader: 'url-loader?limit=12000&name=./images/[name].[hash:8].[ext]'
}file-loader:配置后可以將引入的字體文件打包到font文件下,;
{
// 匹配字體文件;打包到build文件下
test: /\.(woff|woff2|svg|eot|ttf)$/, //
loader: 'file-loader?name=./fonts/[name].[ext]'
}
注意：這里的相對(duì)路徑都是在出口文件的目錄下生成的。
基本配置文件:
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './src/index.js', // 入口文件
output: { // 出口文件
path: path.resolve(__dirname, './build'),
publicPath: '/build/',
filename: 'bundle.js' //輸出文件
},
module: { // 操作模塊
loaders: [ //加載器
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader?presets[]=es2015&presets[]=react'
},
{
test: /\.scss$/,
loader: ['style-loader', 'css-loader', 'sass-loader?sourceMap']
},
{
test: /\.(png|jpg|gif)$/,
loader: 'url-loader?limit=12000&name=./images/[name].[hash:8].[ext]'
//將小于12k的圖片轉(zhuǎn)換到base64引入;大于的使用file-loader遷入到./build/images/目錄下;
},
{
test: /\.html$/, //處理html里的文件資源
loader: 'html-withimg-loader'
},
{
// 匹配字體文件;打包到build文件下
test: /\.(woff|woff2|svg|eot|ttf)$/, //
loader: 'file-loader?name=./fonts/[name].[ext]'
},
{
//打包到build文件下
test: /\.php$/, //
loader: 'file-loader?name=./php/[name].[ext]'
}
]
}
}
