初试 Webpack

最后更新：
阅读次数： 次
许可协议： 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议

Webpack 是一个模块打包器（对于 webpack 来说，一切资源都是模块~）。它的主要目的是把 JavaScript 文件捆绑到浏览器环境中使用，也能够支持转换、绑定、或者打包任何形式的资源。它会根据模块的依赖关系进行静态分析，然后将这些模块按指定的规则生成对应的静态资源。

  • 在你项目的根目录下使用 npm 创建 package.json
npm init
  • 本地安装 webpack，就是安装到你的项目目录的 node_modules 下
// 本地安装Webpack
npm install --save-dev webpack
  • 使用 webpack 有两种方式
    • 一是在终端下直接输入执行命令以及相关的配置命令（node_modules/.bin/webpack src/main.js build/bundle.js）
    • 二是先在本地设置好配置文件 webpack.config.js，然后在终端下输入执行命令 node_modules/.bin/webpack（这个因为是在本地安装的，所以这么输，如果是全局安装的，直接 webpack）

一般开发时都使用第二种方法。

  • 瞧瞧 webpack.config.js
// 最简单的 webpack.config.js 文件

module.exports = {
  entry: "./src/main.js", // 唯一入口文件
  output: {
    path: "./build", // 打包后的文件存放的地方
    filename: "bundle.js" // 打包后输出文件的文件名
  }
};

使用 webpack-dev-server

webpack-dev-server 是 webpack 自己的本地服务器，安装上它后，可以帮助你更快地进行开发，它可以监控本地文件的改动，并在浏览器上实时刷新，方便查看效果。

webpack-dev-server provides you with a server and live reloading.

// 进行本地安装

npm install --save-dev webpack-dev-server

安装完以后，需要在 webpack 的配置文件里进行配置一下。

module.exports = {
  entry: "./src/main.js",
  output: {
    path: "./build",
    filename: "bundle.js"
  },

  // 在下面进行配置 webpack-dev-server
  devServer: {
    contentBase: "./build",
    historyApiFallback: true,
    inline: true
  }
};
  • 常见配置参数
    • contentBase： 设置服务器的根目录（通常设置为 build 目录）
    • inline： 布尔值，设置为 true 后，服务器会在源文件发生改动时自动刷新页面（源文件指的是在 src 目录下的，不是 build 目录下的）
    • watchContentBase： 布尔值，默认 false，设置为 true 后，会监听 build 目录下的文件变动
    • compress： 是否开启 gzip 压缩
    • headers： 一个对象，为每次的 HTTP 请求设置某些头字段
    • https： 设置为 true，可以使用 https，默认使用 http
    • port： 设置服务器监听的端口，默认为 8080
    • historyApiFallback： 设置为 true 后，所有的跳转将指向 index.html

使用加载器 Loader

webpack enables use of loaders to preprocess files. This allows you to bundle any static resource way beyond JavaScript.

Loaders 是 webpack 中最让人激动人心的功能之一了。通过使用不同的 loader，webpack 可以通过调用外部的脚本或工具可以对各种各样的格式的文件进行预处理。

Loader 是一个函数（Node.js 中运行），接受资源文件作为参数，并返回转换的结果。这样，Webpack 就可以通过 require 加载任何类型的模块或文件，如：Stylus、 JSX、图片等。

  • 举一些例子

    • 自动将 JSON 文件转化为 JavaScript 可使用的对象
    • 动态编译 Stylus、Sass、Less 文件
    • 把图片转换为 Base64 编码的字符串
    • 将 ES6 代码转换为 ES5
    • 将 Markdown 编译为 HTML

  • json-loader

// 安装 json-loader
npm install --save-dev json-loader
// 在 webpack.config.js 文件里配置 json-loader
// test 的参数对应的是一个正则表达式，注意不要给它加引号

module.exports = {
    ...
    module: {
        rules: [{
            test: /\.json$/,
            use: 'json-loader'
        }]
    }
    ...
}


// 这样，在其他的 js 文件就可以引用 json 文件了

let jsonData = reqiure('./profile.json');
// 或者直接使用 ES6 的模块写法
import jsonData from './profile.json';
  • css-loader：使你能够使用类似 @import 和 url(...) 的方法实现 require() 的功能
  • style-loader：将所有的计算后的样式加入页面中
// 可以一次联合多个 loader 针对同一种类型的文件

module.exports = {
    ...
    module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader','css-loader']
        }]
    }
    ...
}

以上仅为简单的介绍，仅供参考。各个 loader 详细的使用方法还请自行查阅官方文档，比如一个 loader 可能有很多配置选项，但是这里没列出来。

插件 Plugin

插件（Plugins）是用来拓展 Webpack 功能的，它们会在整个构建过程中生效，执行相关的任务。Loaders 和 Plugins 常常被弄混，但是他们其实是完全不同的东西.可以这么来说，loaders 是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程其作用。

这里拿上面的 css-loader & style-loader 举个例子，通过这两个 loader 可以把指定加载的 css 加载到指定页面的 style 标签之内。但是我们想为这些 css 单独放到一个文件中，并在页面上通过 link 标签加载。

// 安装
npm install --save-dev extract-text-webpack-plugin
// 下面这个是我本次学习进行的配置

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

module.exports = {
  entry: "./src/main.js",
  output: {
    path: __dirname + "/build",
    filename: "bundle.js"
  },

  module: {
    rules: [
      {
        test: /\.json$/,
        use: "json-loader"
      },
      {
        test: /\.css$/,
        //use: ['style-loader', 'css-loader']
        use: ExtractTextPlugin.extract({
          use: "css-loader"
        })
      },
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"]
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({
      filename: "bundle.css",
      disable: false,
      allChunks: true
    })
  ],
  devServer: {
    contentBase: __dirname + "/build",
    port: 2000,
    inline: true,
    historyApiFallback: true,
    watchContentBase: true
  }
};

先到这里吧，以后实际用上时，再分别总结具体需求下的具体配置（Webpack 配置内容真多啊~）

参考资料