webpack基本配置

v

概念

对于刚接触 webapck 的同学来说，可能首先要想知道的是 webpack是什么，它能做什么

对于这个问题，webpack 的官网给我们的答案：

本质上， webpack 是一个现代  JavaScript 应用程序的静态模块打包工具。当  webpack 处理应用程序时，它会在内部构建一个 依赖图( dependency graph)，此依赖图会映射项目所需的每个模块，并生成一个或多个  bundle

核心

webpack 的核心有四个

• entry 入口
• output 输出
• loader
• plugin 插件

entry

指示  webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。进入入口起点后， webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的.默认值是  ./src/index.js

output

告诉  webpack 在哪里输出它所创建的  bundle，以及如何命名这些文件。主要输出文件的默认值是  ./dist/main.js，其他生成文件默认放置在  ./dist 文件夹中

loader

webpack 只能理解  JavaScript 和  JSON 文件。 loader 让  webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中

plugin

loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量

1、entry（项目入口）　　

字符串，如entry:"./src/index.js"

数组形式： 如entry:[react, react-dom],可以把数组中的多个文件打包转换为一个chunk

对象形式，如果需要配置的是多页的应用，或者我们哟啊抽离出指定模块作为指定公共代码，需要采用这种形式，属性名是占位符[name]的值

// entry 表示 入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。 // 类型可以是 string | object | array // 只有1个入口，入口只有1个文件 entry: './app/entry' // 只有1个入口，入口有2个文件 entry: ['./app/entry1', './app/entry2'] // 有2个入口 entry: { a: './app/entry-a', b: ['./app/entry-b1', './app/entry-b2'] },

如：

entry: { app: './src/main.js' }

 2、output（出口文件）

会告诉webpack在哪里输出所创建的bundle.js以及如何命名

// 如何输出结果：在 Webpack 经过一系列处理后，如何输出最终想要的代码。 output: { // 输出文件存放的目录，必须是 string 类型的绝对路径。 path: path.resolve(__dirname, 'dist'), // 输出文件的名称 filename: 'bundle.js', // 完整的名称 filename: '[name].js', // 当配置了多个 entry 时，通过名称模版为不同的 entry 生成不同的文件名称 filename: '[chunkhash].js', // 根据文件内容 hash 值生成文件名称，用于浏览器长时间缓存文件 // 发布到线上的所有资源的 URL 前缀，string 类型 publicPath: '/assets/', // 放到指定目录下 publicPath: '', // 放到根目录下 publicPath: 'https://cdn.example.com/', // 放到 CDN 上去 // 导出库的名称，string 类型 // 不填它时，默认输出格式是匿名的立即执行函数 library: 'MyLibrary', // 导出库的类型，枚举类型，默认是 var // 可以是 umd | umd2 | commonjs2 | commonjs | amd | this | var | assign | window | global | jsonp ， libraryTarget: 'umd', // 是否包含有用的文件路径信息到生成的代码里去，boolean 类型 pathinfo: true, // 附加 Chunk 的文件名称 chunkFilename: '[id].js', chunkFilename: '[chunkhash].js', // JSONP 异步加载资源时的回调函数名称，需要和服务端搭配使用 jsonpFunction: 'myWebpackJsonp', // 生成的 Source Map 文件名称 sourceMapFilename: '[file].map', // 浏览器开发者工具里显示的源码模块名称 devtoolModuleFilenameTemplate: 'webpack:///[resource-path]'