Webpack安装好了以后，就可以在项目环境里运行了。在运行前，自定义webpack配置

创建配置文件

webpack-cli给我们提供了丰富的终端命令行指令，可以通过webpack --help来查看，可是命令行不方便也不直观，而且还不利于保存配置的内容。因此，webpack 还给我们提供了通过配置文件，来自定义配置参数的能力。

创建文件 webpack.config.js
配置内容如下

const { resolve } = require('path'); // node 内置核心模块，用来处理路径问题。
module.exports = {
entry: './src/js/index.js', 
output: {
    filename: 'bundle.js',
    path: resolve(__dirname, 'build/js'), // ok,输出文件夹必须定义为绝对路径
    // bad 
    path: './dist', 
},
mode: 'development' //开发环境 };

自动引入资源

之前项目中，我们都是在 index.html 文件中手动引入所有资源，然而随着应用程序增长，如果继续手动管理 index.html 文件，就会变得困难起来。然而，通过一些插件可以使这个过程更容易管控。

* 什么是插件

插件是 webpack 的核心功能。插件可以用于执行一些特定的任务，包括:打包优化，资源管理，注入环境变量等。Webpack 自身也是构建于你在 webpack 配置中用到的相同的插件系统之上! 想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建一个插件实例。 Webpack 提供很多开箱即用的插件

* 使用 HtmlWebpackPlugin

首先安装插件：

npm install --save-dev html-webpack-plugin

并且调整 webpack.config.js 文件:

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
// loader 的配置 ]
}, plugins: [
// plugins 的配置
// html-webpack-plugin
// 功能:默认会创建一个空的 HTML，自动引入打包输出的所有资源(JS/CSS) // 需求:需要有结构的 HTML 文件
new HtmlWebpackPlugin({
// 打包生成的文件的模板，复制 './src/index.html' 文件，并自动引入打包输出的所有资源(JS/CSS)
      template: './src/index.html',
      filename: 'app.html', // 打包生成的文件名称。默认为index.html 
      // 设置所有资源文件注入模板的位置。可以设置的值true|'head'|'body'|false，默认值为 true 
      inject: 'body'

    })
],
  mode: 'development'
};

运行指令webpack打包，打包后，我们发现这个 dist/index.html 似乎与先前的 index.html 并没有关系，HtmlWebpackPlugin 会默认生成它自己的 index.html 文件，并且所有的 bundle(bundle.js) 会自动添加到 html 中

* 清理dist

仔细留意一下，我们发现 dist/index.html 仍旧存在，这个文件是上次生成的残留文件，已经没有用了。可见，webpack 将生成文件并放置在 /dist 文件夹中，但是它不会追踪哪些文件是实际在项目中用到的。通常比较推荐的做法是，在每次构建前清理 /dist 文件夹，这样只会生成用到的文件。让我们使用 output.clean 配置项实现这个需求。

module.exports = {
output: {
// 打包前清理 dist 文件夹
 clean: true
},
}

使用 source map

当webpack 打包源代码时，可能会很难追踪到 error(错误) 和 warning(警告) 在源代码中的原始位置。例如，如果将三个源文件(a.js, b.js 和 c.js)打包到一个 bundle( bundle.js )中，而其中一个源文件包含一个错误，那么堆栈跟踪就会直接指向到 bundle.js 。你可能需要准确地知道错误来自于哪个源文件，所以这种提示这通常不会提供太多帮助为了更容易地追踪 error 和 warning，JavaScript 提供了 source maps 功能，可以将编译后的代码映射回原始源代码。如果一个错误来自于 b.js ，source map 就会明确的告诉你。我们将使用 inline-source-map 选项,可以精确定位错误的行数:

module.exports = {
// 在开发模式下追踪代码
devtool: 'inline-source-map',
}

使用 watch mode(观察模式)

在每次编译代码时，手动运行 npx webpack 会显得很麻烦。我们可以在 webpack 启动时添加 "watch" 参数npx webpack --watch。如果其中一个文件被更新，代码将被重新编译，所以你不必再去手动运行整个构建。

使用 webpack-dev-server

webpack-dev-server 为你提供了一个基本的 web server，并且具有 live reloading(实时重新加载) 功能。先安装:

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

修改配置文件，告知 dev server，从什么位置查找文件:

module.exports = {
    // dev-server
  devServer: {
    static: './dist'
} }

以上配置告知 webpack-dev-server ，将 dist 目录下的文件作为 web 服务的根目录。

提示:webpack-dev-server 在编译之后不会写入到任何输出文件。而是将 bundle 文件保留在内存中，然后将它们 serve 到 server 中，就好像它们是挂载在 server 根路径上的真实文件一样。

执行命令npx webpack serve --open,在浏览器里可以直接访问页面:localhost:8080/app.html,修改任意文件，这时我们不用手动刷新浏览器页面，页面会实时自动更新

webpack开发环境基础配置