webpack基本配置

webpack配置

1. entry

• entry: './js/main.js'
• 应用程序的起点入口，从这个起点开始，应用程序启动执行，如果传递一个数组的话，那么数组的每一项都会执行。
• 类型可以是string，array，object；

2. output

• output配置是输出最终想要的代码，它是一个object，里面包含很多配置项

1. filename：输出文件的名称

filename: '[name].js' //[name]的值是entry的键值，会输出多个入口文件

2. path：文件被写入硬盘的位置，一般通过nodejs的path模块获取绝对路径

path: path.resolve(_dirname,'./dist') //将输出的文件都放在dist目录下

3. chunkFilename是未被列在entry中的，但是有需要被打包出来的文件命名配置。

在异步按需加载模块的时候，一般这样的文件没有被列在entry中

require.ensure（
　　dependencies：String[]，// 标明依赖的模块，这些会提前加载
　　callback：function（require），
    // 回调函数里面的require的文件会被单独打包成一个chunk,不会和主文件打包在一起，这样就生成了两个chunk,
    // 第一次加载时只加载主文件，当点击时就会加载单独打包的chunk
　　errorCallback：function（error），
　　chunkName：String
）

4. publicPath

• output.path是指所有输出文件的本地文件目录（绝对路径），也即path是存放打包后的文件的输出目录。
• publicPath正式环境可以理解为改变相对目录下的静态资源文件的路径为正确的路径，它是指定资源文件引用的目录（相对于服务器的根目录来讲）

开发环境下的publicPath的理解：将输出的文件都放在dist目录下，然后把dist目录删除掉，使用publicPath可以保留dist目录

5. 模式（mode）

• 提供mode配置项，告诉webpack使用对应的模式【使用development模式代码不会被压缩，使用production代码会被压缩】

我们都知道webpack是适用于资源进行打包的，里面的所有资源都是模块，内部实现了对模块资源进行加载机制，但是webpack只能处理js模块，如果要处理其他类型的文件，就要使用loader进行转换。Loader可以理解为是模块和资源的转换器，它本身也是一个函数，接收源文件作为参数，返回转换的结果。

• 配置loader，需要使用rules模块来读取和解析规则，它是一个数组，数组里面的每一项描述了如何处理部分文件

1 条件匹配：

  test：/.js$/ , //正则匹配以js结尾的
  include：path.resolve(__dirname,'src') //只包含目录下的js文件，加快查找速度
  exclude：path.resolve(__dirname,'node_modules') //排除node_modules目录下的文件

• 通过配置test，include，exclude三个配置项来选中loader需要应用规则的文件；

2 应用规则：

• 对选中的文件通过use配置项来应用loader，可以只应用一个loader或者按照从右往左的顺序应用一组loader，也可以向loader传入参数；

3 重置顺序：

• Loader执行顺序默认是从右往左执行的，但是我们可以通过enforce选项将其中一个Loader的执行顺序放到最前或最后

• 在loader需要传入多个参数时，可以通过一个object来描述

use: [
    {
        loader: 'babel-loader',
        options: {
            cacheDirectory: true
        },
        /*
        enforce: 'post' 的含义是将Loader执行的顺序放到最后
        enforce: 'pre' 的含义是将Loader执行顺序放到最前面
        */
        enforce: 'post'
    }
]   

6. noParse

• 该配置项可以让webpack忽略对部分未采用模块化文件的递归解析和处理，该忽略的文件不能包含import，require，define等模块化语句。

这样可以提高构建性能，比如像一些库jquery等就没必要使用webpack去递归解析和处理。

7. alias

• resolve.alias是通过别名来将原导入路径映射成一个新的导入路径。

resolve: {
    alias: {
        components: './src/components'
    }
}

8. extensions

• 在使用import导入文件时，有时候没有带入文件的后缀名，webpack会自动带上后缀去访问文件是否存在，默认的后缀名为[.js .json]

9. externals

• externals用来告诉webpack在构建代码时使用了不处理应用的某些依赖库，即告诉webpack在js运行环境中已经内置了哪些全局变量，不用将这些代码打包到代码里面去。
• 依然可以在代码中通过AMD，CMD或window全局方式访问。