webpack学习记录（二）

参考书籍《深入浅出webpack》

继上章本文将介绍几种常用的配置

1. Module

module 是用来配置处理模块的规则，有以下三个主要部分。

• loader（见上章）
• noParse
• parse

1.2 noParse

noParse作用是过滤掉不需要解析的文件，从而提高性能，例如第三方库（react,react-dom）

module: {
    noParse: '/react|react-dom/'
}

1.3 parse

同 noParse 配置项的区别在于，parser可以精确到语法层面,可以更细粒度地配置哪些模块语法被解析、哪些不被解析，而 noParse 只能控制哪些文件不被解析。

module: { 
    rules : [ 
        parser: { 
            amd: false ／／禁用 AMD
            commonjs : false , ／／禁用 CommonJS
        }
    ]
}

2. Resolve

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

• alias
• extensions

2.1 alias

创建 import 或 require 的别名，来确保模块引入变得更简单。

如果我想引入位于/src/components/button的组件，在未配置alias前写法是：

import Button from './src/components/button'

如果我配置了alias，就可以简写成

import Button from 'components/button'

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

如果想命中具体的文件，可以将alias写成

resolve:{ 
    alias : { 
    'react$' :'./path/to/react.min .js'
    }
}

2.2 extensions

extensions配置可以让你在引入模块时不写后缀名

extensions : [ '.js' ,'json' ]   //这是默认配置

也就是说当你想引入react.js文件时，你可以写出这样

import react from './path/to/react'

3. DevServer

DevServer是用来提高开发效率的，不是用来打包的。使用这个需要先安装npm i -D webpack-dev-server,webpack-dev-server命令不能在终端中直接使用，需要在package.json中配置,然后npm run server才能启动(命令可以自定义)。

• hot
• port
• open
• contentBase

3.1 hot

这是DevServer最好用的功能，他可以让你写完代码后无需刷新，它会将你修改的代码直接替换原来的代码，实现局部更新。这个需要配套HotModuleReplacementPlugin一起使用。

const webpack = require("webpack");//引入webpack 
module.exports = {
    devServer: {
        hot: true,//在服务中开启模块热替换
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()//使用webpack的内置插件 
    ]
}

ps: 如果你使用使用了webpack的热更新后，修改样式文件，不能热更新到样式文件上。可能是将样式文件和js文件分开了，所以样式文件不会生效。

3.2 port

devServer.host 配置项用于配置DevServer服务监昕的端口默认使用8080端口如果80端口巴经被其他程序占用，就使用 8081 ：如果 8081 还是被占用，则使用 8082 ，以此类推。

3.3 open

作用于 Dev Server 启动且第一次构建完时，自动用我们的系统的认浏览器去打开要开发的网页。

3.4 contentBase

配置 DevServer HTTP 服务器的文件根目录。若想将项目根目录下的 public 目录设置成 DevServer 服务器的文件根目录，则可以这样配置。

devServer:{ 
    contentBase : path.join( dirname,’public ’)
}

4. devtool

选择一种 source map 格式来增强调试过程。不同的值会明显影响到构建(build)和重新构建(rebuild)的速度。
具体参考webpack中文网devtool