webpack简单打包PC网站前端资源

阅读更多

 :arrow: 
1. 纯前端的打包输出,比较有局限
2.目录结构
	|--build
	|--app
		|--base //基础核心文件，譬如jQuery，公共Util等
		|--css	
		|--images

		|--plugins	//jQuery插件
			|--jquery.lazyload.js

		|--page		//功能页面模块，每个模块至少包含一个和文件夹同名的js，作为打包入口
			|--common
				|--orderCommon.js
				|--xxx.js
			|--orderDetail
				|--orderDetail.js
			|--orderList
				|--orderList.js
			|--search
				|--search.js
				|--searchHelper.js
			|--abc
				|--abc.js
		|--vendor.js		// 全站公用文件

//vendor.js

import $ from 'jQuery';
import "plugins/jquery.lazyload";

import Util from "app/base/Util";

require('app/css/page/global.css');

//orderDetail.js
import Util from "app/base/Util";

var orderCommon = null;
var orderDetail = {
	init: function(){
		//
	}
};

//异步加载，确保orderCommon将被分割为单独文件加载
require.ensure(['app/page/common/orderCommon'],function(orderCommon){
	orderCommon = orderCommon;
	orderDetail.init();
});

//webpack.config.js

var webpackDevHost = 'localhost'

var path = require('path'),
  webpack = require('webpack'),
  ExtractTextPlugin = require('extract-text-webpack-plugin'),
  Clean = require('clean-webpack-plugin'),
  HtmlWebpackPlugin = require('html-webpack-plugin');

var glob = require('glob');
var AssetsPlugin = require('assets-webpack-plugin');

const BUILD_DIRECTORY = 'build';
const BUILD_DROP_PATH = path.resolve(__dirname, BUILD_DIRECTORY);

var ENV_PRO = false;

var entry = (function getEntry(){
    var entry = {};
    var result = glob.sync(path.join('./app/page', '**/*.js'));

    //获取page下目录，符合 page/xxx/xxx.js 的，将被视为entry入口。
    result.forEach( function(name) {
      var folder = name.split('/')[2],
          filename = name.split('/')[3];
      if(folder !== 'common' && folder + '.js' === filename){
          entry[name.split('/').pop().split('.').shift()] = name;
      }
    });

    //额外的附加入口
    entry.vendor = './app/page/vendor.js';
    entry.jqueryui = './app/page/jqueryui.js';

    // console.log(JSON.stringify(entry));
    return entry;
})();


module.exports = {
    // devtool: 'eval',
    
    // 'webpack-dev-server/client?http://' + webpackDevHost + ':' + webpackDevPort,
    // 'webpack/hot/only-dev-server',
    entry: entry,
    output: {
      path: path.join(__dirname, './build2'),
      filename: ENV_PRO ? '[name].[chunkhash].js': '[name].js',
      chunkFilename: ENV_PRO ?  "[id].[chunkhash].js" : '[id].js',
      pathinfo:  ENV_PRO ? true : false,
      publicPath: 'http://192.168.91.250:1234/build2/'
    },
    plugins: [

      // new webpack.HotModuleReplacementPlugin(),
      // new webpack.NoErrorsPlugin()


      new Clean(['build2'])
      // ,new webpack.ProvidePlugin({
      //     $: "jquery",
      //     jQuery: "jquery",
      //     "window.jQuery": "jquery"
      // })

      ,new ExtractTextPlugin( ENV_PRO ? "[name].[hash].css" : '[name].css')


      // ,new webpack.optimize.CommonsChunkPlugin({
      //       name: "c-commons",
      //       chunks: ["orderDetail", "orderList"]
      //   })


      ,new webpack.optimize.CommonsChunkPlugin({
        name: "vendor",
        filename:  ENV_PRO ? 'vendor.[chunkhash].js' : 'vendor.js'
        ,minChunks: Infinity
      })

      ,new AssetsPlugin({
          filename: 'webpack.assets.json',
          path: path.join(__dirname, './build2'),
          prettyPrint: true
      })

      // ,new uglifyJsPlugin({
      //   compress: {
      //     warnings: false
      //   }
      // })
    ],
    resolve: {
      alias: {
        app: path.join(__dirname, '/app'),
        base: path.join(__dirname, '/app/base'),
        page: path.join(__dirname, '/app/page'),
        plugins: path.join(__dirname, '/app/plugins'),
        jquery: path.join(__dirname, '/app/base/jquery.pack.js'),
        jQuery: path.join(__dirname, '/app/base/jquery.pack.js'),
        $: path.join(__dirname, '/app/base/jquery.pack.js')
      },
      extensions: ['', '.js', '.jsx']
    },
    module: {
          loaders: [{
            test: /jquery.pack.js/,
            loader: 'expose?$!expose?jQuery!'
          },{ test: /plugins\/jquery\..+\.js$/,
              loader: 'imports?jQuery=jquery,$=jquery,this=>window'
          },{
            test: /\.(js|jsx)$/,
            exclude: /(node_modules)/,
            loader: 'babel?presets[]=es2015,presets[]=stage-3'
          },{
            test: /\.scss$/,
            loader: ExtractTextPlugin.extract("style-loader",'css-loader!sass-loader')
          }, {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract("style-loader",'css-loader')
          },{
            test: /\.(jpe?g|png|gif)$/,
            loader: 'url?limit=8192&name=images/[hash].[ext]'
          }, {
            test: /\.(woff|woff2|eot|ttf|svg)$/,
            loader: 'url?limit=8192'
          }, {
            test: /\.html/,
            loader: 'raw'
          }, {
            test: /\.json/,
            loader: 'json'
          }]
    }
}

package.json

{
  "name": "site_pc",
  "repository": "",
  "version": "1.1.0",
  "main": "webpack.config.js",
  "scripts": {},
  "license": "ISC",
  "devDependencies": {
    "assets-webpack-plugin": "^3.3.0",
    "babel-core": "^6.1.21",
    "babel-loader": "^6.1.0",
    "babel-polyfill": "^6.3.14",
    "babel-preset-es2015": "^6.1.4",
    "babel-preset-stage-3": "^6.1.2",
    "clean-webpack-plugin": "^0.1.4",
    "css-loader": "^0.23.0",
    "es6-promise": "^3.0.2",
    "expose-loader": "^0.7.1",
    "imports-loader": "^0.6.5",
    "extract-text-webpack-plugin": "^0.9.1",
    "html-loader": "^0.3.0",
    "html-webpack-plugin": "^1.6.2",
    "imports-loader": "^0.6.5",
    "json-loader": "^0.5.3",
    "nib": "^1.1.0",
    "node-sass": "^3.4.2",
    "raw-loader": "^0.5.1",
    "sass-loader": "^3.1.2",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.6",
    "webpack": "^1.12.4",
    "webpack-dev-server": "^1.12.1",
    "webpack-manifest-plugin": "^1.0.0"
  }
}