webpack基本使用

简介

本人Java后台狗一枚，本着全“干”工程师的目的，一边学习一边努力提升自己。本文记录了使用webpack进行打包项目的过程。

webpack是一款时尚的模块加载和打包工具，当下主流的开源项目都已经使用webpack进行开发，所以，使用webpack，走在时尚的潮流（玩笑话）。

附：Webpack官网

步骤

安装

常规使用方法，新建项目npm init，使用npm install webpack --save-dev进行安装。

配置

我们需要告诉webpack需要做一些什么，新建文件配置文件webpack.config.js。并参考以下配置：

const webpack = require('webpack')
const webpackConfig = {
  name: 'client',
  target: 'web',
  devtool: 'source-map',
  resolve: { //其它解决方案配置
    root: paths.client(),
    extensions: ['', '.web.js', '.js', '.jsx', '.json']
  },
  module: {},
  postcss: []
}

webpackConfig.entry = { //页面入口文件配置
  app: __DEV__
    ? ['whatwg-fetch', APP_ENTRY].concat(`webpack-hot-middleware/client?path=${config.compiler_public_path}__webpack_hmr`)
    : ['whatwg-fetch', APP_ENTRY],
  vendor: config.compiler_vendors
}

webpackConfig.output = { //入口文件输出配置
  filename: `js/[name].[${config.compiler_hash_type}].js`,
  chunkFilename: 'js/[name].[chunkhash].js',
  path: paths.dist(),
  publicPath: config.compiler_public_path
}

webpackConfig.module.loaders = [{ //加载器配置
  test: /\.(js|jsx)$/,
  exclude: /node_modules/,
  loader: 'babel',
  query: {
    cacheDirectory : true,
    plugins        : ['transform-runtime'],
    presets        : ['es2015', 'react', 'stage-0']
  }
}, {
  test: /\.json$/,
  loader: 'json'
}]

webpackConfig.plugins = [ //插件配置
  new webpack.DefinePlugin(config.globals),   //将config.globals变量定义在开发代码中
  new HtmlWebpackPlugin({
    template: paths.client('index.html'),
    hash: false,
    favicon: paths.client('static/favicon.ico'),
    filename: viewName,
    inject: 'body',
    minify: {
      collapseWhitespace: true
    }
  })
]

其中 plugins 是插件项，entry 是页面入口文件配置，output 是对应输出项配置（即入口文件最终要生成什么名字的文件、存放到哪里）,module.loaders 是最关键的一块配置。它告知 webpack 每一种文件都需要使用什么加载器来处理。

运行

其中推荐执行命令为如下：

webpack --display-error-details

webpack --config XXX.js   //使用另一份配置文件打包

webpack --watch   //监听变动并自动打包

webpack -p    //压缩混淆脚本

webpack -d

总结

webpack版本更新的很快，建议及时去中文官网中查看相关文档。