这是我的目录文件
webapck
-app ##项目文件
|__css
|__base.css
|__style.css
|__images
|__zhoulou.jpg
|__js
|__base.js
|__index.js
|__base.html
|__index.html
+build ##打包文件
+node_modules
-package.json
-webpack.config.js
这个我的webpack.config.js
的配置文件
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');
var path = require('path');
var fs = require('fs');
var src_dir = './app';
var build_dir = './build';
var common = 'common';
function getentry(dir,cb){
fs.readdirSync(dir).forEach(function(file){
var pathname = path.join(dir,file);
if(fs.statSync(pathname).isFile()){
cb(file.replace('.html',''));
}
});
}
var cfg_entry = {}
var plugins = [
new ExtractTextPlugin("css/[name].css"),
new webpack.optimize.CommonsChunkPlugin({
name: common,
filename: common + '.js'
})
]
getentry(path.join(src_dir),function(entry){
cfg_entry[entry] = src_dir + '/js/' + entry + '.js';
plugins.push(
new HtmlWebpackPlugin({
template:path.join(build_dir,entry + '.html'),
filename:path.join('./',entry + '.html'),
chunks:[common,entry]
})
);
});
module.exports = {
entry: cfg_entry,
output: {
path: path.resolve(__dirname, 'build'),
filename: 'js/[hash:8].[name].js',
chunkFilename: 'js[name].[hash:8].js',
},
module: {
loaders:[
{test:/\.css$/,loader: ExtractTextPlugin.extract('style-loader', 'css-loader')},
{test: /\.html$/,loader: "html?attrs=img:src img:data-src"},
{test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,loader: 'file-loader?name=./fonts/[name].[ext]'},
{test: /\.(png|jpg|gif)$/,loader: 'url-loader?limit=8192&name=./images/[hash].[ext]'}
]
},
resolve: {
extensions: ['', '.js', '.css', '.jsx'],
},
plugins: plugins,
}
可是打包出来是下面这样的,少了一个images
文件common.js
应该是放在js
文件里的,这是怎么回事?
build
|__css
|__base.css
|__common.css
|__index.css
|__js
|__base.js
|__index.js
|__common.js
|__base.html
|__index.html
少了images
我猜是因为url-loader
的缘故,当图片小于8192
,会直接转换成base64
字符串打包进js
里。
common.js
不在js
目录,是因为你没有指定,改改你的plugins
:
var plugins = [
new ExtractTextPlugin("css/[name].css"),
new webpack.optimize.CommonsChunkPlugin({
name: common,
filename: 'js/' + common + '.js'
})
]