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