1
我使用字體真棒-的WebPack加載字體真棒，我webpack.config.js是提取物 - 文本的WebPack-插件publicPath選項不起作用
'use strict';
const webpack = require('webpack');
const siteRoot = '_site';
// for browserSync
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
// for clean folders before building
const CleanWebpackPlugin = require('clean-webpack-plugin');
// for creation of HTML
const HtmlWebpackPlugin = require('html-webpack-plugin');
// for extract css
const ExtractTextPlugin = require('extract-text-webpack-plugin');
// path
const path = require('path');
const PATHS = {
app: path.join(__dirname, 'src'),
bin: path.join(__dirname, '')
};
// for get multiple entry list
function getEntryList (type) {
let glob = require('glob');
let fileList = [];
let entryList = glob.sync(PATHS.app+'/**/*.'+type).reduce(function(o,v,i) {
let regex = /([^\/]+)(?=\.\w+$)/;
let index = v.match(regex)[0];
o[index] = v;
return o;
},{});
return entryList;
}
/**
* loop multiple files
*/
let entryHtmlPlugins = Object.keys(getEntryList('pug')).map(function(entryName){
let v = getEntryList('pug')[entryName]; // get full path
let filenamePath = v.split(/src\/([^.]*)/)[1] +'.html';
let templatePath = v.split(/(src\/.*)/)[1];
// filter chunks config
let chunkList = [];
switch(entryName){
case 'default':
chunkList.push('commons','index');
}
return new HtmlWebpackPlugin({
filename: filenamePath,
chunks: chunkList,
template: templatePath
})
});
module.exports = {
entry: getEntryList('ts'),
output: {
path: PATHS.bin,
// publicPath: '{{site.baseurl}}/',
publicPath: './',
filename: 'js/[name]-[hash:8].js'
},
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js","styl"]
},
module: {
preLoaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'jshint'
}
],
loaders: [
/********* css to js */
{
test: /\.css$/,
exclude: ['/node_modules/'],
loader: ExtractTextPlugin.extract('style',['css'],{publicPath:'./fonts/'})
},
/********* pug to js */
{
test:/\.pug$/,
exclude: /node_modules/,
loader: 'pug-html-loader',
query: {
pretty: true
}
},
/********* ts to js */
{
test:/\.ts$/,
exclude: /node_modules/,
loader: 'ts-loader'
},
/********* stylus to css*/
{
test: /\.styl$/,
exclude: ['/node_modules/','/src/css/includes/'],
loader: ExtractTextPlugin.extract('style',['css','stylus'])
},
// the url-loader uses DataUrls.
// the file-loader emits files.
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
,
/********* url loader*/
{
test: /\.(png|jpg)$/,
exclude: /node_modules/,
loader: 'url-loader?limit=8192&name=[name]-[hash:8].[ext]'
}
]
},
watch: true,
plugins: [
/** clean folders */
new CleanWebpackPlugin(['css','js','_site/js','_site/css'],{
root: __dirname,
verbose: true,
dry: false
}),
/** commonsPlugin */
new webpack.optimize.CommonsChunkPlugin("commons", "js/commons-[hash:8].js"),
/** extract css */
new ExtractTextPlugin('css/[name]-[hash:8].css'),
new BrowserSyncPlugin({
files: [siteRoot + '/**'],
host: 'localhost',
port: 3000,
server: { baseDir: [siteRoot] }
},{reload:true})
].concat(entryHtmlPlugins),
jshint: {
esversion: 6
}
};
我只想使用字體真棒，但是在CSS的URL路徑總是錯的，輸出的CSS這樣的：
@font-face {
font-family: 'FontAwesome';
src: url(./fonts/25a32416abee198dd821b0b17a198a8f.eot);
src: url(./fonts/25a32416abee198dd821b0b17a198a8f.eot?#iefix&v=4.6.3) format('embedded-opentype'), url(./fonts/e6cf7c6ec7c2d6f670ae9d762604cb0b.woff2) format('woff2'), url(./fonts/c8ddf1e5e5bf3682bc7bebf30f394148.woff) format('woff'), url(./fonts/1dc35d25e61d819a9c357074014867ab.ttf) format('truetype'), url(./fonts/d7c639084f684d66a1bc66855d193ed8.svg#fontawesomeregular) format('svg');
font-weight: normal;
font-style: normal;
}
和輸出的字體文件是./但不./fonts/。
這意味着輸出字體總是使用publicPath of output，但不是ExtractTextPlugin.extract('style',['css'],{publicPath:'./fonts/'})。我究竟做錯了什麼？