webpack? 是非常主流的打包工具 ,?
webpack必不可少的是下面這幾項(xiàng)
entry, output, module(loader, dev-server) plugins
entry? output ? ?
入口文件和出口文件?
入口文件可以是一個 , 也可以是多個
module.exports = {
????entry: __dirname + "/app/main.js",? ? //入口
????output: { path: __dirname + "/public",? ? //出口
????????filename: "index.js"? ? //文件名
????}
}
上面 entry 是入口 , 唯一的入口就是 app.js??
?__dirname 就是這個入口文件的路徑 , 在出口的時(shí)候也用到了 , 比如入口文件在 aaa/bbb/app/mian.ja , 那么__dirname就是aaa/bbb , 出口自然就是 aaa/bbb/public/index.js .?
如果是多入口文件 , 就可以把entry寫成對象的形式 , 然后出口文件寫成?[name].js 就會自動獲取入口文件的名字
{
????entry: {
????page1: "./page1",
????//支持?jǐn)?shù)組形式，將加載數(shù)組中的所有模塊，但以最后一個模塊作為輸出
????page2: ["./entry1", "./entry2"]
},
output: {
????path: "dist/js/page",
????filename: "[name].bundle.js"
????}
}
常用的 loader 及作用:
style-loader css-loader css相關(guān)
babel-loader es6和jsx
sass-loader node-sass scss相關(guān)
url-loader file-loader 處理二進(jìn)制轉(zhuǎn)base64形式。
{
????test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,????
????loader: 'url-loader',
????options: {
????????limit: 20000,
????????name: 'img/[name].[hash:16].[ext]'
????}
}
上面就表示以 png?jpe?jpeg?gif?svg 結(jié)尾的都用url-loader
比2000b小的就使用base64的格式 , 否則就放在img目錄下 , 名字后加16位的哈希值 , 以.ext為后綴
小圖片用base64可以減少http請求 , 優(yōu)化性能?
dev-server
devServer: {
????historyApiFallback: true,
????hot: true,
????inline: true,
????port: 3000,
????proxy: {
????????'/v4': {
????????????target: 'https://m.maizuo.com/',
????????????secure: false
????????}
????}
},
historyApiFallback :在開發(fā)單頁應(yīng)用時(shí)非常有用，它依賴于HTML5 history API，如果設(shè)置為true，所有的跳轉(zhuǎn)將指向index.html . false就是不跳轉(zhuǎn)
hot: true, inline: true, 表示熱更新 . 如果頁面發(fā)生改變了(除了webpack.config.js) , 那么會自動更新瀏覽器
port 當(dāng)然就是端口 , 如果不寫默認(rèn)就是8080
proxy 反向代理 . 沒有也可以 . 用到得到話在加就可以
常用的 plugins? 及作用:
HtmlWebpackPlugin 向html文件內(nèi)插入生成的js和css文件引用
extract-text-webpack-plugin css文件抽離
CommonsChunkPlugin 分離js的公共模塊
UglifyJsPlugin 壓縮js代碼
BannerPlugin 添加頭部Banner
DefinePlugin 定義變量并替換
示例
var?ExtractTextPlugin?=?require("extract-text-webpack-plugin");
var?HtmlWebpackPlugin?=?require('html-webpack-plugin');
var webpack = require("webpack");
module.exports = {
????entry: {bundle: "./input.js"},
????output: {
????????path: __dirname + "/build",
????????filename: "[name].js"
????},
module: {
????loaders: [
????{
????????test: /\.css$/,
????????loader: ExtractTextPlugin.extract({
????????????fallback: "style-loader",
????????????use: "css-loader"
????????})
????},
????{
????????test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
????????loader: 'url-loader',
????????options: {
????????????limit: 20000,
????????????name: 'img/[name].[hash:7].[ext]'
????????}
????},
????{
????????test: /\.js$/,
????????loader: 'babel-loader', // ES6轉(zhuǎn)碼用組件
????????query: {
????????????presets: ['es2015']
????????}
????},
????{
????????test: /\.scss$/, // CSS預(yù)處理 預(yù)編譯
????????loader: ExtractTextPlugin.extract({
????????????fallback: "style-loader",
????????????use: "css-loader!sass-loader"
????????})
????}
????]
????},
devServer: {
????historyApiFallback: true,
????hot: true,
????inline: true,
????port: 8080,
????proxy: {//反向代理
????????'/v4': {
????????target: 'https://m.maizuo.com/',
????????secure: false
????}
}
},
plugins:? [
????new ExtractTextPlugin("styles.css"),
????new webpack.optimize.CommonsChunkPlugin('common'),
????new HtmlWebpackPlugin({
????????template: __dirname + "/index.html"
????}),
????new webpack.BannerPlugin({
????????banner: "這是banner"
????}),
????new webpack.DefinePlugin({
????????HOST_NAME: JSON.stringify("http://www.xxx.com")
????}),
????new webpack.optimize.UglifyJsPlugin({
????compress: {
????????warnings: false
????},
????sourceMap: true
????})
????],
????externals: {
????????jquery: "jQuery" // window.jQuery????
????}
};
