webpack重点配置实践总结

历程

第一次接触webpack是在前些日子用Vue开发了一些简单demo（todoList），并且随后又开发了本博客的一些功能，想用Vue组件文件开发？，想用ES6语法？就必须上webpack了，其实之前对这构建工具很是抵触，配置麻烦，搞一大堆文件看得头晕脑胀，但又不得不用，稍微用熟了一点之后，特别是各种cli工具出来后，不得不说我之前的想法脑残了，真的是好用方便。下面文章中总结一下我使用过程中遇到的坑和一些重要的配置。

关于模块系统

Webpack可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

而现在web前端这块儿大部分都在使用ES6模块

import "jquery";
export function doStuff() {}
module "localModule" {}

出入口文件配置

 module.exports = {
  entry:{ 
  app:'./src/main.js'//入口文件
  },
  output: {
      path:path.resolve(__dirname, '../dist'),//存放打包后文件的输出目录
      publicPath:'/',//指定资源文件引用的目录
      filename: 'app.bundle.js',//打包文件名
  },

说明：

• __dirname:node.js中的一个全局变量，它指向当前执行脚本所在的目录。
• publicPath:指定资源文件在哪个目录引用，这个取决于你网站的根目录（index.html所在位置）的位置，我此处设置为'/'，即表示资源文件在当前目录，这个在路径引用的时候需要特别注意。
• 如果想要build多个文件，在entry选项中加入就行，如：

entry: ['./app.js', './utils.js']

使用别名

看如下配置：

 resolve: {
    extensions: ['', '.js', '.vue'],
    fallback: [path.join(__dirname, '../node_modules')],
    alias: {
      'vue$': 'vue/dist/vue',
      'src': path.resolve(__dirname, '../src'),
      'assets': path.resolve(__dirname, '../src/assets'),
      'components': path.resolve(__dirname, '../src/components'),
      "jquery": path.resolve(__dirname, '../node_modules/jquery/dist/jquery.slim.min.js'),
      "bootstrap": path.resolve(__dirname, '../src/plugin/bootstrap'),
    }
  }

说明：

• extensions：用于指明程序自动补全识别哪些文件后缀
• fallback：添加项目中的node_modules目录到解析路径中,防止模块无法被找到，这个地方还有另一个设置同样需要添加：

resolveLoader: {//此配置项和resolve平行
    fallback: [path.join(__dirname, '../node_modules')]
  }

• alias：它的作用是把用户的一个请求重定向到另一个路径，以便在其他文件中进行引用的时候可以更方便，这个配置在插件和依赖以及静态资源比较多的时候炒鸡好用，大大节省时间。
• path.resolve：使用前需要注意先在文件头部引入path模块：

var path = require('path')

Loader

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

module: {
    noParse: [],
    loaders: [
      //css和sass分开加载
      { test: /\.scss$/,
        loader: ExtractTextPlugin.extract(
          "style-loader",
          "css-loader!sass-loader?sourceMap",
          {
            // 图片、字体资源打包到css上级目录
            publicPath: "../"
          }
        )
      },
      { test: /\.css$/,
        loader: ExtractTextPlugin.extract(
          "style-loader",
          "css-loader?sourceMap",
          {
            // 图片、字体资源打包到css上级目录
            publicPath: "../"
          }
        )
      },
      //vue
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      // babel处理es6
      {
        test: /\.js?$/,
        exclude: [
          node_modules
        ],
        loader: 'babel'
      },
      // 图片及字体打包
      {
        test: /\.(ttf|eot|svg|png|gif|woff(2)?)(\?.*?)?$/,
        loader: "file-loader"
      }
    ]
  }

说明：

• ExtractTextPlugin：上面加载css和sass的时候用到ExtractTextPlugin，这是一个CSS文件单独抽取的插件，可以生成便于开发环境测试的CSS source-map 并且减少DOM操作（因为在webpack默认对css打包压缩的处理中，对css文件经过处理之后是在js文件中然后通过在页面的style中插入），在下面将讲解的代码中进行插件配置才能使其生效。
• noParse：此配置中noParse没有进行配置，但是这是一个很有用的选项，如果你确定一个模块中没有其它新的依赖 就可以配置这项，webpack 将不再扫描这个文件中的依赖，从而减少了打包时间，大大提高效率。如果不在乎构建时间可以不配置这个，毕竟人脑都容易出错，随时都会记错很多东西。

另外

比如用到了vue，要想把vue里的sass文件单独提取出来在这里就需要进行单独配置：

vue: {
  loaders: {
    sass: ExtractTextPlugin.extract('vue-style-loader', 'css-loader', 'sass-loader')
  }
}

插件

插件可以完成更多 loader 不能完成的功能

这就到了上面提到的ExtractTextPlugin，需要在这里配置：

plugins: [
    // 配置以文件形式打包css
    new ExtractTextPlugin("css/[name].css?[hash]-[chunkhash]-[contenthash]-[name]", {
      disable: false,
      allChunks: true
    })
  ]

同时不能忘记了引入：

var ExtractTextPlugin = require("extract-text-webpack-plugin");

使用Webpack加载的第三方库或插件中，基本上都需要依赖另外一些库，例如jQuery，所以这里提一下在webpack项目中使用jquery的配置，我们在前面的别名配置中已经定义好了jquery文件位置，进行如下配置：

plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      jquery: "jquery",
      "window.jQuery": "jquery",
    })
  ]

此配置提供了一个自定义的插件，可以使jquery变成全局变量，你不用在自己的开发文件中import "jquery";了，免去了很多麻烦。

以上总结的这些差不多是webpack最基本的配置了，实际开发和生产环境中会有更多的Loaders和插件引入，比如热加载插件、html-webpack-plugin、CommonsChunkPlugin等等，总之在配置和修改配置的时候要尽量细心，毕竟配置繁多，很轻易就出错了。