webpack 搭建自动打开，刷新浏览器；

最新推荐文章于 2024-06-24 09:34:54 发布

一个有梦想的咸鸭蛋

最新推荐文章于 2024-06-24 09:34:54 发布

阅读量6.4k

点赞数

分类专栏： webpack

本文链接：https://blog.csdn.net/eggdream/article/details/72947198

版权

本文档详细介绍了如何使用Webpack搭建项目，包括目录结构解析、Webpack配置文件的编写、安装cnpm、配置es6编译器Babel以及使用webpack-dev-server实现浏览器自动刷新。特别提到了webpack-dev-server的iframe模式和inline模式，并指导如何配置自动打开浏览器功能。

摘要由CSDN通过智能技术生成

目录结构

se6：项目文件名；
build：打包后保存文件；
src：项目源代码；
index.html：运行时默认打开的页面（你也可以自行设置）
package.json：指定你项目中的node模块；
wbpack.config.js： wbpack的配置文件

在src文件夹下创建一个index.js文件, 这个文件就是我们的入口文件，也就是启动webpack时，webpack去访问的文件，

创建webpack.config.js文件，这个文件是运行webpack时，webpack默认运行的文件，

安装cnpm

命令
cnpm install

安装包的信息要保持到项目的package.json文件中，以便后续的其它的项目开发或者他人合作使用，package.json在项目中是必不可少的

cnpm init

webpack.config.js文件配置

const path = require('path');//node.js的 path API 路径API  
module.exports = {
    context: path.resolve(__dirname, 'src'),
    //context 基础目录，必须是绝对路径；path.resolve 解析为绝对路径 参数：————dirname 目录名，我们这里的入口文件是src/index.js，所以这里写src，path.resolve已经把目录解析为绝对路径所以不用写/src

    entry: './index.js',
    //entry：入口文件，因为我们上面已经指定了基础的目录Context（/src），所以我们这里只需要写./index.js

    output: {
        filename: 'build.js',
        //输出的文件名

        path: path.r