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

目录结构

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'

配置地本服务

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"
  },

报错

解决办法

1. 删除项目中的node_modules文件夹
2. cnpm install

运行npm run server

热更新

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