使用webpack进行打包

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

1. 如果想在项目中使用sass，就需要安装相应的loader（node-sass,sass-loader）。由于墙的原因，建议使用cnpm 进行安装。

2. 如果想在项目中使用postcss，就需要安装postcss-loader，并且根据配置安装相应的插件，如postcss-import,postcss-cssnext。

3. 如果想在项目中使用ES6语法，就需要安装babel-loader,一般还需安装babel-core，并根据.babelrc文件安装其他的依赖。

4. 如果想在项目中使用jQuery,不能直接引入，而是需要一些额外的配置。

vendor.js

import $ from 'jquery'window.$ = $window.jQuery = $export default $

之后在主js文件中引入vendor.js后，就可以正常引入其他jQuery插件。

import $ from 'vendor.js'import 'jquery-ui'

webpack的配置文件大致如下所示：

var path = require('path');var ExtractTextPlugin = require('extract-text-webpack-plugin');var HtmlWebpackPlugin = require('html-webpack-plugin');var webpack = require('webpack');module.exports = {  // configuration  entry: {    app: './src/js/index.js',    vendors: ['jquery']  }, //代表入口(总)文件，可以写多个  output: {    path: path.resolve(__dirname, "build/js/"), //输出文件夹    filename: "[name].[chunkHash:5].js"  //最终打包生成的文件名  },  module: {    rules:  [{      test: /\.scss$/,      use: ExtractTextPlugin.extract({        fallback: 'style-loader',        //resolve-url-loader may be chained before sass-loader if necessary        use: [{ loader: 'css-loader' , options: { importLoaders: 1 } },            'postcss-loader', 'sass-loader']      })    },{        test: /\.css$/,        use: ExtractTextPlugin.extract({          fallback: 'style-loader',          use: [            { loader: 'css-loader' , options: { importLoaders: 1 } },            'postcss-loader'          ]        })    }, {      test: /\.js|jsx$/, //是一个正则，代表js或者jsx后缀的文件要使用下面的loader      loader: "babel-loader",      exclude:/node_modules/    },{        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,        loader: 'url-loader',        options: {          limit: 10000,          name: 'img/[name].[hash:7].[ext]'        }    },      {        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,        loader: 'url-loader',        options: {          limit: 10000,          name: 'fonts/[name].[hash:7].[ext]'        }    }]  },  plugins: [    new ExtractTextPlugin('../css/my.css'),    new HtmlWebpackPlugin({      filename: path.join(__dirname,'./build/index.html'),      template: path.join(__dirname,'./src/index.html'),      chunks: ['app', 'vendors']    }),    new webpack.LoaderOptionsPlugin({         compress: {            properties: false,            warnings: false        },        output: {            beautify: true,            quote_keys: true        },        mangle: {            screw_ie8: false        },        sourceMap: false   }),    new webpack.optimize.CommonsChunkPlugin({      name: 'vendors',      filename: 'vendors.js'    })  ]};

具体的配置项可以参考本人的github上面的配置:
webpack_config