webpack--webpack.config.js配置文件(二)

r囧r小猫 2022-03-01 03:10 271阅读 0赞

## 目录结构 ##

![clipboard.png][]

## webpack.config.js ##

const path = require('path');
    module.exports = {
        // 入口 
        entry: { 
            entry: './src/entry.js',
        },
        // 出口
        output: {
            //绝对路径
            path: path.resolve(__dirname,'dist'),
            filename: 'bundle.js'
        },
        // 模块
        module: {},
        //插件
        plugins: [],
        //开发服务
        devServer: {}
    }

`path.resolve(__dirname,'dist')`表示绝对路径`D:\study\2018\webpack\webpack1\dist`

## 运行 ##

webpack
    live-server

## 多入口，多出口配置 ##

const path = require('path');
    module.exports = {
        // 入口 
        entry: { 
            entry: './src/entry.js',
            entry2:'./src/entry2.js',
        },
        // 出口
        output: {
            //绝对路径
            path: path.resolve(__dirname,'dist'),
            filename:'[name].js'
        },
        // 模块
        module: {},
        //插件
        plugins: [],
        //开发服务
        devServer: {}
    }

### 入口文件随意命名 ###

entry:\{

entry:"",
    entry1:""

### 出口文件动态变化 ###

filename:'[name].js'

![clipboard.png][clipboard.png 1]

## 配置地本服务 ##

devServer: {
            contentBase: path.resolve(__dirname, 'dist'),
            host: '192.168.1.9',
            compress: true, //服务端是否启用压缩
            port:1717
        }

### 安装webpack-dev-server ###

cnpm install webpack-dev-server --save-dev

### 更改package.json中的scripts，运行项目命令 ###

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

报错

![clipboard.png][clipboard.png 2]  
解决办法

1.  删除项目中的node\_modules文件夹
2.  cnpm install

### 运行npm run server ###

![clipboard.png][clipboard.png 3]

### 热更新 ###

修改src中的entry.js文件，浏览器马上刷新

![clipboard.png][clipboard.png 4]

[clipboard.png]: /images/20220301/16c1498ff9fa45f197a904584d02c845.png
[clipboard.png 1]: /images/20220301/6f1e3f535f164dd7abe1ba4c4b78602c.png
[clipboard.png 2]: /images/20220301/aa83b9cb75274b78ac8c253350a01e71.png
[clipboard.png 3]: /images/20220301/d7a5e85a15f04f03b9fbc7c444786b6e.png
[clipboard.png 4]: /images/20220301/f05c9695a0bc4cdc98c23577a67e22d5.png