Webpack(一)前端專案打包配置
阿新 • • 發佈:2018-12-26
前提
全域性環境下安裝 nodejs
使用
1、安裝依賴包
如果專案沒有npm管理,即沒有package.json檔案
初始化專案為nodejs專案
npm init
- 輸入必要資訊
- 生成package.json檔案
安裝webpack依賴
cnpm install webpack --save -dev
- –save:表示在安裝的同時,將依賴包寫入package.json中
- -dev:表示將依賴寫在devDependency(開發依賴包)中
安裝Loader,style,css,svg,url,file,font-awesome以及postCss
cnpm install style-loader css-loader svg-url-loader url-loader file-loader font-awesome-webpack postcss-webpack --save -dev
style-loader :處理位於頁面內的style標籤中的css
css-loader :處理css檔案中的url(這種寫法是為了將css與js分開打包,利用外掛ExtractTextPlugin)
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallback: "style-loader" ,
use: "css-loader"
})
},
- svg-url-loader :svg圖片處理
{
test: /\.(svg|eot|woff|ttf)\w*/,
loader: 'file-loader?outputPath=fonts/&name=[name].[ext]'
},
url-loader :
- 1.檔案大小小於limit引數,url-loader將會把檔案轉為DataURL;
- 2.檔案大小大於limit,url-loader會呼叫file-loader進行處理,引數也會直接傳給file-loader。有引數
{
test: /\.(png|jpg|gif)$/,
loader: 'url-loader?limit=8192&name=css/images/[name].[ext]'
},
- file-loader :解析專案中的url引入(不僅限於css),根據我們的配置,將圖片拷貝到相應的路徑,再根據我們的配置,修改打包後文件引用路徑,使之指向正確的檔案。有引數
{
test: /\.xsl$/,
loader: "file-loader?name=[name].[ext]"
}
url-loader和file-loader涉及到了4個引數:limit、name、outputPath、publicPath。
- 其中limit已經說明過,告訴url-loader,在檔案小於多少個位元組時,將檔案編碼並返回DataURL。
file-loader相關的是name、outputPath和publicPath。下面解釋一下這3個引數
- name表示輸出的檔名規則,如果不新增這個引數,輸出的就是預設值:檔案雜湊。
- 加上[path]表示輸出檔案的相對路徑與當前檔案相對路徑相同,加上[name].[ext]則表示輸出檔案的名字和副檔名與當前相同。
加上[path]這個引數後,打包後文件中引用檔案的路徑也會加上這個相對路徑。
outputPath表示輸出檔案路徑字首。
- 圖片經過url-loader打包都會打包到指定的輸出資料夾下。
- 但是我們可以指定圖片在輸出資料夾下的路徑。
比如outputPath=img/,圖片被打包時,就會在輸出資料夾下新建(如果沒有)一個名為img的資料夾,把圖片放到裡
publicPath表示打包檔案中引用檔案的路徑字首
- 如果你的圖片存放在CDN上,那麼你上線時可以加上這個引數,值為CDN地址,這樣就可以讓專案上線後的資源引用路徑指向CDN了。
- font-awesome-webpack :處理字型檔案
- postcss-webpack
- extract-text-webpack-plugin :將css與js分開打包
- clean-webpack-plugin :在打包前清空目標資料夾
- copy-webpack-plugin :直接複製檔案或資料夾到目標目錄
如果專案已經被npm管理,即包含package.json檔案
- 直接安裝所有依賴
cnpm install
2、配置檔案 webpack.config.js
- 首先新建入口檔案 index.js
引入各種需要的js和css等檔案
require('./js/lib/jquery/jquery.js');
require('./js/lib/jquery/jquery-1.9.1.min.js');
require('./js/lib/jquery/jquery.colorbox.js');
require('./js/common/common.js');
require('./js/main.js');
require('./js/carousel.js');
// require('./js/MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML');
require('./css/iconfont.css');
require('./css/colorbox.css');
require('./css/by.css');
require('./css/jo-dhh.css');
require('./xslt/jats2html.xsl');
- 引入webpack包
var webpack = require("webpack");
- 設定打包入口,和輸出路徑、檔名稱
__dirname為當前目錄
entry: {
index: __dirname + "/index.js",
// vendor:['jQuery'],
},
output: {
path: __dirname + "/dist",
//打包後的檔案存放的地方
filename: "bundle.js"
},
- 為了將js與css分開打包,需要引入外掛extract-text-webpack-plugin
var ExtractTextPlugin = require("extract-text-webpack-plugin");
在module中的loader引數中,對css的處理部分修改為
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
在plugins中新增css檔案打包後的輸出路徑和檔名
new ExtractTextPlugin("style.css")
說明:這裡如果不將引數格式顯示設定為fallback,use格式,後面在打包時會報css檔案錯誤
- 對圖片進行處理
圖片有三種處理方式,一種圖片是在css中被設定為背景樣式,這裡可以直接識別並放入目標資料夾;
{
test: /\.(png|jpg|gif)$/,
loader: 'file-loader?name=images/[name].[ext]'
},
另一種是在html中通過img標籤的src引入,因為webpack對html支援不友好,所以需要藉助外掛html-webpack-plugin
第三種是借用拷貝外掛,直接強行拷貝所有圖片,因為本專案圖片是在xslt中引用,所以採用第三種和第一種結合的方式處理圖片,在plugin引數中新增
new CopyWebpackPlugin([
{
from: 'css/images',
to: 'images'
},
{
from: 'xmlsample',
to: 'xmlsample'
},
{
from: 'js/MathJax',
to: 'MathJax'
}
]),
- 對字型檔案處理
這裡需要注意:字型檔案的css樣式和其餘資原始檔的路徑對應問題
==> 如果css是與其餘的css一起打包,那麼其中對fonts資源的引用路徑也會自動發生變化,一定注意,是個大坑!!==
{
test: /\.(svg|eot|woff|ttf)\w*/,
loader: 'file-loader?outputPath=fonts/&name=[name].[ext]'
},
- 其餘格式檔案處理,專案主要是利用xslt對xml進行轉換,所以需要將xslt也進行處理
{
test: /\.xsl$/,
loader: "file-loader?name=[name].[ext]"
}
- 因為涉及到多個檔案打包成一個檔案,所以開啟source-map對映,方便除錯,釋出版本可以關閉該功能
devtool: 'source-map',
- 拷貝其餘檔案
var CopyWebpackPlugin = require("copy-webpack-plugin");
new CopyWebpackPlugin([
{
from: 'css/images',
to: 'images'
},
{
from: 'xmlsample',
to: 'xmlsample'
},
{
from: 'js/MathJax',
to: 'MathJax'
}
]),
- 因為每次打包結果可能都不一樣,所以每次打包之前需要手動刪除dist資料夾,不太方便,在網上找到一款可以自動刪除目標資料夾的外掛
懶惰才是最大生產力哈哈哈
var CleanWebpackPlugin = require("clean-webpack-plugin");
new CleanWebpackPlugin(
['dist'],
{
root: __dirname, //根目錄
verbose: true, //開啟在控制檯輸出資訊
dry: false //啟用刪除檔案
})
- 配置檔案程式碼
var webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var CopyWebpackPlugin = require("copy-webpack-plugin");
var CleanWebpackPlugin = require("clean-webpack-plugin");
module.exports = {
entry: {
index: __dirname + "/index.js",
// vendor:['jQuery'],
},
output: {
path: __dirname + "/dist",
//打包後的檔案存放的地方
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
// [hash:8]
// {
// test: /\.(png|jpg|gif)$/,
// loader: 'url-loader?limit=8192&name=css/images/[name].[ext]'
// },
{
test: /\.(png|jpg|gif)$/,
loader: 'file-loader?name=images/[name].[ext]'
},
{
test: /\.(svg|eot|woff|ttf)\w*/,
loader: 'file-loader?outputPath=fonts/&name=[name].[ext]'
},
{
test: /\.xsl$/,
loader: "file-loader?name=[name].[ext]"
}
]
},
devtool: 'source-map',
plugins: [
new ExtractTextPlugin("style.css"),
// new webpack.optimize.CommonsChunkPlugin({
// names: ['vendor', 'manifest'],
// }),
new CopyWebpackPlugin([
{
from: 'css/images',
to: 'images'
},
{
from: 'xmlsample',
to: 'xmlsample'
},
{
from: 'js/MathJax',
to: 'MathJax'
}
]),
new CleanWebpackPlugin(
['dist'],
{
root: __dirname, //根目錄
verbose: true, //開啟在控制檯輸出資訊
dry: false //啟用刪除檔案
})
]
}