【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目录并没有打包出来。

这是我当时的配置文档：