webpack学习笔记

最近学习了webpack，并使用webpack搭建了一个自己的react脚手架，现在就理一下自己的学习过程，旨在让读者对webpack有一个大概的了解，具体细节还需查看官方文档。

• 是什么
  webpack 是一个现代 JavaScript 应用程序的静态模块打包器。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle，供我们部署在服务器上。

• 为什么用
  使用webpack的好处是显而易见的。

  • 我们可以使用ES6+的语法。
  • 我们可以使用css的预处理器。
  • 模块化编程，不用担心依赖的重复引入。
  • 减少http请求，优化初始加载时间。
  • .......

• 基础知识

  • 入口
    指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。
  • 输出
    指示 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件。
  • Loader
    让 webpack 能够去处理那些非 JavaScript 文件。
  • 插件
    用于执行范围更广的任务。
  • 补充
    webpack支持AMD，CommonJs，ES6三种模块规范的js文件。
    在webpack眼中，一切皆模块。
    具体插件和Loader的使用可以看他们的官方文档。
    其他配置选项可自行查看文档。
    webpack的简单使用见webpack入门

• 实战（搭建自己的react脚手架，详情见react脚手架）
  webpack配置文件如下：
  webpack.config.js

let htmlWebpackPlugin = require("html-webpack-plugin");
let path = require('path')

let base = {
  entry: __dirname + "/src/index.js",
  output: {
    path: __dirname + "/build",
    filename: "[name]-[hash].js"
  },
  plugins: [
    new htmlWebpackPlugin({
      template: "src/index.html"
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
        include: path.resolve(__dirname,"src")
      },
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "postcss-loader", "sass-loader"],
        include: path.resolve(__dirname,"src")
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "postcss-loader", "less-loader"],
        include: path.resolve(__dirname,"src")
      },
      {
        test: /\.(png|jpg|svg|gif|jpeg)$/i,
        use: ["file-loader?name=[name]-[hash].[ext]"],
        include: path.resolve(__dirname,"src")
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: ["file-loader?name=[name]-[hash].[ext]"],
        include: path.resolve(__dirname,"src")
      },
      {
        test: /\.(jsx|js)$/,
        use: ["babel-loader"],
        include: path.resolve(__dirname,"src")
      }
    ]
  }
 
};
module.exports = base;

webpack.config.dev.js

let base = require("./webpack.config");
let webpack = require("webpack");
module.exports = Object.assign({},base,{
    devServer: {
        contentBase: __dirname + "/build",
        compress: true
    },
    devtool: "inline-source-map",
    plugins: base.plugins.concat([
        new webpack.HotModuleReplacementPlugin()
    ])
})

webpack.config.prod.js

let base = require("./webpack.config");
let webpack = require("webpack");
let cleanWebpackPlugin = require("clean-webpack-plugin");
module.exports = Object.assign({},base,{
   plugins: base.plugins.concat([
       new cleanWebpackPlugin("build/*.js"),
       new webpack.optimize.UglifyJsPlugin()
   ])
})

• 学习资料
  webpack文档
  react脚手架
  webpack入门demo