使用webpack进行打包

使用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