首页 > webpack自动编译文件入口

webpack自动编译文件入口

这是我的目录文件

    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'
    })
]
【热门文章】
【热门文章】