webpack插件配置（一） webpack-dev-server 路径配置

最新推荐文章于 2023-08-21 15:13:54 发布

weixin_30820151

最新推荐文章于 2023-08-21 15:13:54 发布

阅读量425

点赞数

文章标签： webpack javascript json ViewUI

原文链接：http://www.cnblogs.com/xiaochengzi/p/9449784.html

版权

本文的路径配置主要涉及到webpack.config.js文件中devServer与output两个选项的配置

webpack-dev-server定义

webpack-dev-server主要是启动了一个使用express的Http服务器。它的作用主要是用来伺服资源文件。此外这个Http服务器和client使用了websocket通讯协议，原始文件作出改动后，webpack-dev-server会实时的编译，但是最后的编译的文件并没有输出到目标文件夹，即output中的配置:

    output: {
        path: './dist/js',
        filename: 'bundle.js'
    }

注意：你启动webpack-dev-server后，你在目标文件夹中是看不到编译后的文件的,实时编译后的文件都保存到了内存当中。因此很多同学使用webpack-dev-server进行开发的时候都看不到编译后的文件

配置实践

前提：

1.项目的目录结构如下：

    app
|__content
 | |__index.html |__src | |__index.js |__node_modules |__package.json |__webpack.config.js

2.package.json添加start命令,配置完成后运行npm start命令，打开浏览器访问http://127.0.0.1:8080/

  "scripts": {
    "start": "webpack-dev-server"
  },


配置一：
webpack.config.js配置

    //应用程序的起点入口。这个起点开始，应用程序启动执行
    entry: './index.js',
    output: {
        filename: 'bundle.js',
    },
    devServer: {
        inline: true,
        contentBase: './content',
    },

index.html内容：注意script src的值

<!doctype html public "storage">
<html>
<meta charset=utf-8/>
<title>My First React Router App</title>
<div id=app></div>
<script src="bundle.js"></script>

结论一：contentBase告诉服务器从哪个目录提供内容，只有在加载静态文件时才需要。上面index.html在项目的content文件夹下，所以contentBase值为'./content'。

配置二：

webpack.config.js

    entry: './index.js',

    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/asset/',
    },

    devServer: {
        inline: true,
        contentBase: './content',
    },

html配置

<!doctype html public "storage">
<html>
<meta charset=utf-8/>
<title>My First React Router App</title>
<div id=app></div>
<script src="asset/bundle.js"></script>

运行结果：项目根目录没有生成dist文件夹，浏览器中正常显示‘Hello, React Router ’

结论二：output中的path是生成目标文件的绝对路径，但是目标文件路径中是看不到编译后的文件，因为webpack-dev-server实时编译的文件都保存到了内存中

结论三：output中的publicPath是访问output生成的文件的路径（是一个访问路径，不需要对应真实的文件路径），所以在html中需要将src设置为'asset/bundle.js'

配置三：

webpack.config.js

    entry: './index.js',

    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/asset/',
    },

    devServer: {
        inline: true,
        contentBase: './content',
        publicPath: '/new/asset/',
    },

html配置

<!doctype html public "storage">
<html>
<meta charset=utf-8/>
<title>My First React Router App</title>
<div id=app></div>
<script src="new/asset/bundle.js"></script>

结论四：devServer中的publicPath配置会覆盖output中的publicPath配置

文档

官方说明

文章参考

转载于:https://www.cnblogs.com/xiaochengzi/p/9449784.html

weixin_30820151

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack插件配置（一） webpack-dev-server 路径配置

本文的路径配置主要涉及到webpack.config.js文件中devServer与output两个选项的配置webpack-dev-server定义webpack-dev-server主要是启动了一个使用express的Http服务器。它的作用主要是用来伺服资源文件。此外这个Http服务器和client使用了websocket通讯协议，原始文件作出改动后，webpack-dev-s...
复制链接

扫一扫