webpack4入门6——其他配置

本文长期更新，如有错误，还请指正！
关注一下不迷路 =.=

devtool

---

开发工具，可见供开发时使用的，生成时注释

devtool: 'inline-source-map'

打包后的js不易阅读，而且也不知道是哪个js打包过来的代码，总之报错后不易定位。

配置 inline-source-map 工具后，报错会指定错误位置和所属文件

devServe

---

devServe 可以提供个本地服务器，并实现代码修改后自动打包，web自动刷新

1 . 安装

cnpm install  webpack-dev-server --save-dev

2 . 配置

//不需要引入
devServer: {
    contentBase: './dist'
}

创建一个本地服务器，通过 localhost:8080 访问

contentBase 指服务器根目录

3. 配置快速启动

为了方便在命令行里快速启动服务器，配置个启动脚本

//package.json
"scripts": {
    "start": "webpack-dev-server --open"
}

配置好后使用 npm start 即可启动服务器

resolve.alias

---

resolve 配置用来指定如何解析资源，这里主要用 resolve.alias 解决import导入时路径只能是相对路径的问题（...太恶心了）

alias 即起别名的意思：给文件/文件夹起个别名。
使用如下：

//webpack.json
alias:{
    src:path.resolve(__dirname, 'src/'),
    //常被导入的文件，可以单独定义一个别名
    actions:path.resolve(__dirname, 'src/components/actions/actions.js'),
}
//import使用
import {Menu} from 'src/menu.js';
import {changeMenu} from 'actions';