《深入浅出webpack》（二、基本配置）

Webpack 内置了很多功能。我们只需要大概明白 Webpack 原理和核心概念去判断选项大致属于哪个大模块下，再去查详细的使用文档。

• 想让源文件加入到构建流程中去被 Webpack 控制，配置 entry。
• 想自定义输出文件的位置和名称，配置 output。
• 想自定义寻找依赖模块时的策略，配置 resolve。
• 想自定义解析和转换文件的策略，配置 module，通常是配置module.rules 里的 Loader。
• 其它的大部分需求可能要通过 Plugin 去实现，配置 plugin。

entry

entry是必填的，是配置模块的入口，Webpack 执行构建的第一步就是从这个入口开始递归解析。

module.exports = {
     
   entry: {
     
       app: './src/main.js'
  },
}

类型	例子	含义
string	‘./app/entry’	入口模块的文件路径，可以是相对路径。
array	[’./app/entry1’, ‘./app/entry2’]	入口模块的文件路径，可以是相对路径。
object	{ a: ‘./app/entry-a’, b: [’./app/entry-b1’, ‘./app/entry-b2’]}	配置多个入口，每个入口生成一个 Chunk。

output

output 配置如何输出最终想要的代码

module.exports = {
     
    output: {
     
        // 把所有依赖的模块合并输出到一个 bundle.js 文件
        filename: "bundle.js",
        // 配置发布到线上资源的 URL 前缀
        // http://localhost:8080/xj/
        publicPath: "/xj",
        // 输出文件都放到 dist 目录下
        path: path.resolve(__dirname, "./dist")
    }
};

module

module 配置如何处理模块。
rules 配置模块的读取和解析规则，通常用来配置 Loader。

module.exports = {
     
	module: {
     
	  rules: [
	    {
     
	      // 命中 JavaScript 文件
	      test: /\.js$/,
	      // 用 babel-loader 转换 JavaScript 文件
	      // ?cacheDirectory 表示传给 babel-loader 的参数，用于缓存 babel 编译结果加快重新编译速度
	      use: ['babel-loader?cacheDirectory'],
	      // 只命中src目录里的js文件，加快 Webpack 搜索速度
	      include: path.resolve(__dirname, 'src')
	    },
	    {
     
	      // 命中 SCSS 文件
	      test: /\.scss$/,
	      // 使用一组 Loader 去处理 SCSS 文件。
	      // 处理顺序为从后到前，即先交给 sass-loader 处理，再把结果交给 css-loader 最后再给 style-loader。
	      use: ['style-loader', 'css-loader', 'sass-loader'],
	      // 排除 node_modules 目录下的文件
	      exclude: path.resolve(__dirname, 'node_modules'),
	    },
	    {
     
	      // 对非文本文件采用 file-loader 加载
	      test: /\.(gif|png|jpe?g|eot|woff|ttf|svg|pdf)$/,
	      use: ['file-loader'],
	    },
	  ]
	}
}

resolve

Resolve 配置 Webpack 如何寻找模块所对应的文件

module.exports = {
     
  resolve: {
     
    //在导入语句没带文件后缀时，Webpack 会自动带上后缀后去尝试访问文件是否存在。也就是说当遇到 require('./data') 这样的导入语句时，Webpack 会先去寻找 ./data.js 文件，如果该文件不存在就去寻找./data.vue,ha ./data.json 文件， 如果还是找不到就报错。
    extensions: ['.js', 'vue', '.json'],
    alias: {
     
      // $ 符号来缩小范围到只命中以关键字结尾的导入语句，只会命中以 vue 结尾的导入语句。import Vue from 'vue' 被 alias 等价替换成了 import Button from 'vue/dist/vue.esm.js'
      'vue$': 'vue/dist/vue.esm.js',
      // 1. import Index from '@/pages/index.vue' 被 alias 等价替换成了 import Index from 'src/pages/index.vue'
      '@': resolve('src'),
    }
  },
}

Plugin

Plugin 用于扩展 Webpack 功能，几乎所有 Webpack 无法直接实现的功能都能在社区找到开源的 Plugin 去解决

module.exports = {
     
  plugins: [
    // 编译时配置的全局变量
    new webpack.DefinePlugin({
     
      //当前环境为开发环境
      'process.env': config.dev.env
    }),
    //热更新插件 new webpack.NoEmitOnErrorPlugin(), //不触发错误,即编译后运行的包正常运行 new HtmlWebpackPlugin({ //自动生成html文件,比如编译后文件的引入 filename: 'index.html', //生成的文件名 template: 'index.html', //模板 inject: true }), new FriendlyErrorsPlugin() //友好的错误提示 ]
    new webpack.HotModuleReplacementPlugin(),

  ],
}