webpack搭建基本的前端开发环境（二）

搭建基本的前端开发环境

咱们平常使用的前端开发环境应该是怎样的？咱们能够尝试着把基本前端开发环境的需求列一下：

• 构建咱们发布须要的 HTML、CSS、JS 文件
• 使用 CSS 预处理器来编写样式
• 处理和压缩图片
• 使用 Babel 来支持 ES 新特性
• 本地提供静态服务以方便开发调试

上述几项应该能够知足比较简单的前端项目开发环境需求了，下面会一一介绍如何配置 webpack 来知足这些需求。

关联 HTML

webpack 默认从做为入口的 .js 文件进行构建（更可能是基于 SPA 去考虑），但一般一个前端项目都是从一个页面（即 HTML）出发的，最简单的方法是，建立一个 HTML 文件，使用 script 标签直接引用构建好的 JS 文件，如：

<script src="./dist/bundle.js"></script>
复制代码

可是，若是咱们的文件名或者路径会变化，例如使用 [hash] 来进行命名，那么最好是将 HTML 引用路径和咱们的构建结果关联起来，这个时候咱们能够使用 html-webpack-plugin。

html-webpack-plugin 是一个独立的 node package，因此在使用以前咱们须要先安装它，把它安装到项目的开发依赖中：

npm install html-webpack-plugin -D 

# 或者
yarn add html-webpack-plugin -D
复制代码

而后在 webpack 配置中，将 html-webpack-plugin 添加到 plugins 列表中：

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin(),
  ],
}
复制代码

这样配置好以后，构建时 html-webpack-plugin 会为咱们建立一个 HTML 文件，其中会引用构建出来的 JS 文件。实际项目中，默认建立的 HTML 文件并无什么用，咱们须要本身来写 HTML 文件，能够经过 html-webpack-plugin 的配置，传递一个写好的 HTML 模板：

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html', // 配置输出文件名和路径
      template: 'assets/index.html', // 配置文件模板
    }),
  ],
}
复制代码

这样，经过 html-webpack-plugin 就能够将咱们的页面和构建 JS 关联起来，回归平常，从页面开始开发。若是须要添加多个页面关联，那么实例化多个 html-webpack-plugin， 并将它们都放到 plugins 字段数组中就能够了。

更多配置这里就不展开讲解了，参考文档 html-webpack-plugin 以及官方提供的例子 html-webpack-plugin/examples。

构建 CSS

咱们编写 CSS，而且但愿使用 webpack 来进行构建，为此，须要在配置中引入 loader 来解析和处理 CSS 文件

module.exports = {
  module: {
    rules: [
      // ...
      {
        test: /\.css/,
        include: [
          path.resolve(__dirname, 'src'),
        ],
        use: [
          'style-loader',
          'css-loader',
        ],
      },
    ],
  }
}
复制代码

style-loader 和 css-loader 都是单独的 node package，须要安装。

咱们建立一个 index.css 文件，并在 index.js 中引用它，而后进行构建。

import "./index.css"
复制代码

能够发现，构建出来的文件并无 CSS，先来看一下新增两个 loader 的做用：

• css-loader 负责解析 CSS 代码，主要是为了处理 CSS 中的依赖，例如 @import 和 url() 等引用外部文件的声明；
• style-loader 会将 css-loader 解析的结果转变成 JS 代码，运行时动态插入 style 标签来让 CSS 代码生效。

经由上述两个 loader 的处理后，CSS 代码会转变为 JS，和 index.js 一块儿打包了。若是须要单独把 CSS 文件分离出来，咱们须要使用 extract-text-webpack-plugin 插件。

const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        // 由于这个插件须要干涉模块转换的内容，因此须要使用它对应的 loader
        use: ExtractTextPlugin.extract({ 
          fallback: 'style-loader',
          use: 'css-loader',
        }), 
      },
    ],
  },
  plugins: [
    // 引入插件，配置文件名，这里一样能够使用 [hash]
    new ExtractTextPlugin('index.css'),
  ],
}
复制代码

CSS 预处理器

在上述使用 CSS 的基础上，一般咱们会使用 Less/Sass 等 CSS 预处理器，webpack 能够经过添加对应的 loader 来支持，以使用 Less 为例，咱们能够在官方文档中找到对应的 loader。

咱们须要在上面的 webpack 配置中，添加一个配置来支持解析后缀为 .less 的文件：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.less$/,
        // 由于这个插件须要干涉模块转换的内容，因此须要使用它对应的 loader
        use: ExtractTextPlugin.extract({ 
          fallback: 'style-loader',
          use: [
            'css-loader', 
            'less-loader',
          ],
        }), 
      },
    ],
  },
  // ...
}
复制代码

处理图片文件

在前端项目的样式中总会使用到图片，虽然咱们已经提到 css-loader 会解析样式中用 url() 引用的文件路径，可是图片对应的 jpg/png/gif 等文件格式，webpack 处理不了。是的，咱们只要添加一个处理图片的 loader 配置就能够了，现有的 file-loader 就是个不错的选择。

file-loader 能够用于处理不少类型的文件，它的主要做用是直接输出文件，把构建后的文件路径返回。配置很简单，在 rules中添加一个字段，增长图片类型文件的解析配置

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {},
          },
        ],
      },
    ],
  },
}
复制代码

更多关于 file-loader 的配置能够参考官方文档 file-loader。

使用 Babel

Babel 是一个让咱们可以使用 ES 新特性的 JS 编译工具，咱们能够在 webpack 中配置 Babel，以便使用 ES六、ES7 标准来编写 JS 代码。

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.jsx?/, // 支持 js 和 jsx
        include: [
          path.resolve(__dirname, 'src'), // src 目录下的才须要通过 babel-loader 处理
        ],
        loader: 'babel-loader',
      },
    ],
  },
}
复制代码

Babel 的相关配置能够在目录下使用 .babelrc 文件来处理，详细参考 Babel 官方文档 .babelrc。

启动静态服务

至此，咱们完成了处理多种文件类型的 webpack 配置。咱们能够使用 webpack-dev-server 在本地开启一个简单的静态服务来进行开发。

在项目下安装 webpack-dev-server，而后添加启动命令到 package.json 中：

"scripts": {
  "build": "webpack --mode production",
  "start": "webpack-dev-server --mode development"
}
复制代码

也能够全局安装 webpack-dev-server，但一般建议以项目开发依赖的方式进行安装，而后在 npm package 中添加启动脚本。

尝试着运行 npm run start 或者 yarn start，而后就能够访问 http://localhost:8080/ 来查看你的页面了。默认是访问 index.html，若是是其余页面要注意访问的 URL 是否正确。

小结

咱们如今已经能够使用 webpack 来完成平常中须要的基础前端构建需求：构建 HTML、CSS、JS 文件、使用 CSS 预处理器来编写样式、处理和压缩图片、使用 Babel、方便开发调试的静态服务，接下来的小节会在这个基础上，深刻 webpack 配置细节，结合实际工做中的一些须要，更进一步地了解 webpack 的使用。