【webpack学习笔记】a04-建立开发环境

开发环境就是在开发过程中为了方便配置的环境，生产环境就是开发完成即将上线的情况。

好了，说了句废话，切入正题。

---

在开发时，打包后的文件压缩成一团，报错调试的时候傻眼了有木有？每次做出修改需要到浏览器查看效果的时候，都要手动npx webpack或者npm run build手动进行打包，耗时又费劲有木有？

用几个工具配置开发环境（不能用于生产环境）解决这个问题：

source map

source map 可以将编译后的代码映射回原始源代码

截个官方图：

更多查看这里

具体用法：

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        print: './src/print.js',
        app: './src/index.js'
    },
    output:{
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    devtool: 'inline-source-map'  //这里可配置各种选项
    plugins:[
        new HtmlWebpackPlugin({
            title: 'Output Management',
            filename: 'index.html',
            template: './src/index.html',
            inject: 'body'
        })
    ]
};

---

webpack Watch && webpack-dev-server

webpack Watch(观察模式)可以解决每次修改后都要手动命令打包的问题，修改完后直接在浏览器中刷新就可以查看。

若刷新都懒得刷新，想一修改就看到结果怎么办？那就用webpack-dev-server.

webpack-dev-server提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)

webpack Watch(观察模式)直接在package.json文件中直接配置就好，配置完后直接在命令行运行npm run watch就可以观察模式，但webpack-dev-server还需要安装一下，我们看下例子：

npm install --save-dev webpack-dev-server

package.json

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        print: './src/print.js',
        app: './src/index.js'
    },
    devtool: 'inline-source-map',
    devServer: {
        //在这里告诉webpack-dev-server,将 dist 目录下的文件，作为可访问文件
        contentBase:'./dist'
    },
    plugins:[
        new HtmlWebpackPlugin({
            title: 'Output Management',
            filename: 'index.html',
            template: './src/index.html'
        })
    ],
    output:{
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

配置好后，命令行运行npm start,就可以开启懒得刷新的懒人模式。

---

踩坑记录：

在学习官方文档，也就是webpack-dev-server这一部分的时候踩了一个坑，当时在配置好webpack.config.js和package.json后，运行命令npm start成功，没有报错，但是浏览器控制台却报404，页面中也显示"Cannot GET".

查看后发现，我的dist目录并没有打包出来。

这是我当时的配置文档：

问题就出现红框勾出来的地方，当时我配置了清理dist目录，只要注释掉就可以正常运行了。

还有就是这时候输出的文件名最好不要配置hash值，否则也会出现找不到文件的情况。

其实清理dist目录和配置文件hash值都是用于生产环境，在开发环境去掉了也不会有影响。