动手写webpack配置--3.webpack-dev-server 安装运行

基于Webpack4.x + npm6.5 + node v10.10.0 +react+ vscode环境.

项目名webpackDemo；

在上一节:https://blog.csdn.net/fengsh998/article/details/88070878中整合了react环境,但运行看效果，都是手动打开本地html 的方式。本了就写下本地服务.webpack-dev-server,文中继上一节的基础上进行配置。

1.安装webpack-dev-server. npm install -D webpack-dev-server

2.安装成功后修改package.json，把原来dev 的改为执行webpack-dev-server

  "scripts": {
    "start": "node ./src/index.js",
    "dev": "webpack-dev-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

然后先把dist目录下上一次用webpack输出的bundle.js这个打包文件删除了。

3 .执行npm run dev

AdeMacBook-Pro-3:webpackdemo a$ npm run dev

> [email protected] dev /Users/a/Documents/reactNative/reactstudy/webpackdemo
> webpack-dev-server

ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wdm｣: Hash: 60bb4a8b68e060be9283
Version: webpack 4.29.6
Time: 1264ms
Built at: 2019-03-02 13:12:24
    Asset      Size  Chunks             Chunk Names
bundle.js  1.21 MiB    main  [emitted]  main
Entrypoint main = bundle.js
...
...
[./src/App.js] 2.23 KiB {main} [built]
[./src/index.js] 467 bytes {main} [built]
    + 23 hidden modules
ℹ ｢wdm｣: Compiled successfully.

可以看到启动了服务，并监听了localhost的8080端口。webpack output is served from / 指定了存放的目录为根目录。

此时用浏览器打开http://localhost:8080

可以看到将本地的webpackDemo文件夹中映身到了webpack-dev-server中的根目录下。

现在点击dist 看下。

到这里，可以看到运行没有输出bundld.js。难道真的没有输出吗？难不成要我们先webpack先打包一下再运行？不是的。你详细看日志就可以知道使用webpack-dev-server时，会找当前路径下的webpack.config.js配置文件，打包后进行映射。

4.解决找不到boundle.js的问题。修改webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/index.js',
    mode: 'development',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
            test: /\.(js|jsx)$/,      //当碰到js或jsx文件时,即文件中用到import 或reqire导入js时
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ["es2015", "react"]
                }
            },
            exclude: [
                path.resolve(__dirname, './node_modules')
            ]
        }]
    },
    devServer: {
        contentBase: path.join(__dirname, "dist"),
        overlay: true
    }
}

加上一个devServer对象。

webpack 是打包并输出打包后的文件。

webpack-dev-server 是打包后放在内存中，虚拟映射的目录，那么contentBase是啥呢。没配置的情况下是当前项目的映射目录。

所以上面没打定的情况我们看到可以有当前开发目录下的所有文件。其实打包后的bundle.js也是放在了这个映射目录下。所以点dist找不到bundle.js。那怎么样证明我不是在瞎扯。很简单啊，不要停webpack-dev-server这个服务。到源文件目录下把dist下的index.html改下

<body>
    <div id='root'></div>
    <script src='../bundle.js'></script>
</body>

好了，所以在webpack.config.js中的devServer对象加入contentBase 表示打包后的bundle.js输出到‘dist’ 下。

overlay 为true。主要是当编译打包时出现现问题浏览器上可以看出相对应的错误信息。

好了把。html中的../bundle.js改回到./bundle.js。重新运行npm run dev

AdeMacBook-Pro-3:webpackdemo a$ npm run dev

> [email protected] dev /Users/a/Documents/reactNative/reactstudy/webpackdemo
> webpack-dev-server

ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/a/Documents/reactNative/reactstudy/webpackdemo/dist
ℹ ｢wdm｣: Hash: 60bb4a8b68e060be9283
Version: webpack 4.29.6
Time: 1341ms
...

可以看到能成功运行了。

下一节继续了解webpack-deb-server 相关的配置参数。

动手写webpack配置--3.webpack-dev-server 安装运行

猜你喜欢