我们发现每次都需要在命令行填写输入输出文件路径实在是太麻烦了，且容易出错。所以webpack提供了一个读取默认名为webpack.config.js配置文件的功能。在该配置文件中我们可以配置诸多信息，其中就包括文件的入口和出口。
现在，我们在项目的更目录下新建一个名为webpack.config.js的文件。
//webpack是基于node的，所以配置文件其实就是一个js导出的对象 var path = require('path'); module.exports = { //入口 entry: path.join(__dirname, '/src/main.js'), //出口 output: { path: path.join(__dirname, '/dist'), filename: 'bundle.js' } }这样，我们就可以直接使用webpack命令进行打包了。可能我们还不满足于手动加载的方式，就像nodemon一样，我们希望当我们作出变动时就能及时打包响应，这样我们需要另外安装一个模块：webpack-dev-server。
再改进：使用webpack-dev-server热加载
安装
# 安装(注意，依赖本地webpack) npm install web-dev-server --save-dev
使用
在package.json的scripts中配置一下就能使用了：
# 配置到package.json "dev": "webpack-dev-server" # 命令行启动 npm run dev
细节问题
现在我们需要通过:8080来访问页面。此时如果我们修改并保存main.js，会自动执行打包动作，但我们页面却没有发生变化，这是因为自动编译的出口目录并不是原来那个文件，且不在物理磁盘，而在内存中。默认的路径为根路径，所以/bundle.js才能访问到自动打包的文件。
更多的配置
我们可以修改命令或者在webpack.config.js中增加配置来修改一些默认选项。
使用命令：
# --open 自动打开浏览器访问根目录 # --contentBase ./src 设置访问的根目录为src目录 # --hot 启用热加载 webpack-dev-server --open --contentBase ./src --hot
使用配置文件也能达到一样的效果
const path = require('path'); const webpack = require('webpack'); module.exports = { //入口 entry: path.join(__dirname, '/src/main.js'), //出口 output: { path: path.join(__dirname, '/dist'), filename: 'bundle.js' }, devServer: { open: true, contentBase: path.join(__dirname, '/src'), hot: true //注意，这样配置还不够，因为热更新需要使用到webpack自带的一个插件：模块热替换插件 }, plugins: [ new webpack.HotModuleReplacementPlugin()//启用模块热替换插件 ] }更多关于webpack-dev-server请参考https://www.webpackjs.com/configuration/dev-server/
3、加载非js文件webpack默认只能加载js文件，如果是非js文件则需要使用第三方文件加载模块。
比如我们在main.js导入我们写的一个css文件main.css。
1、首要我们任意规定一个css样式：
li{ list-style-type: none; }
2、然后需要在main.js中导入（这是webpack提供的特殊loader模式）：
import './main.css'
3、现在我们只需要配置需要的第三方文件加载模块即可
加载css文件需要两个模块：style-loader和css-loader.
npm install style-loader css-loader --dev修改配置文件，增加配置选项：
module.exports = { module: {//第三方模块的引用 rules: [//匹配规则 test使用正则表达式来匹配loader的文件类型 use是使用的模块：从后往前加载 {test: /\.css$/, use: ['style-loader', 'css-loader']} ] } }注意：这个加载顺序很重要，如果模块之间存在依赖或顺序关系，则需要保证加载顺序从后往前加载。
类似的文件加载是一样的道理。