webpack 3.X学习之基本配置

创建配置文件webpack.config.js

在根目录在手动创建webpack.config.js，配置基本模板

module.exports ={
    entry:{},
    output:{},
    module:{},
    plugins:[],
    devServer:{}
}

• entry：配置入口文件的地址，可以是单一入口，也可以是多入口；
• output：配置出口文件的地址，支持多出口配置；
• module：配置模块，主要解析CSS和图片转换压缩等功能；
• plugins：配置插件；
• devServer：配置开发服务功能；

entry选项配置

这个选项配置我们要压缩的文件一般是javascript。

entry：{
    entry:'./src/entery.js'
}

output选择配置

出口配置用来告诉webpack最后打包文件的地址和文件名称；

output:{
    //打包后的文件路径
    path: path.resolve(__dirname,'dist'),
    //打包后的文件名称
    filename:'bundle.js'
}

当然还要引入path模块，这个是nodejs自带的模块；在webpack.config.js文件的头部引入；

const path = require('path');

现在的代码结构：

const path = require('path');
module.exports={
    //入口文件的配置项
    entry:{
        entry:'./src/entry.js'
    },
    //出口文件的配置项
    output:{
        //输出的路径，用了Node语法
        path:path.resolve(__dirname,'dist'),
        //输出的文件名称
        filename:'bundle.js'
    },
    //模块：例如解读CSS,图片如何转换，压缩
    module:{},
    //插件，用于生产模版和各项功能
    plugins:[],
    //配置webpack开发服务功能
    devServer:{}
}

多入口，出口配置

const path = require('path');
module.exports={
    //入口文件的配置项
    entry:{
        entry:'./src/entry.js',
        //这里我们又引入了一个入口文件
        entry2:'./src/entry2.js'
    },
    //出口文件的配置项
    output:{
        //输出的路径，用了Node语法
        path:path.resolve(__dirname,'dist'),
        //输出的文件名称
        filename:'[name].js'
    },
    //模块：例如解读CSS,图片如何转换，压缩
    module:{},
    //插件，用于生产模版和各项功能
    plugins:[],
    //配置webpack开发服务功能
    devServer:{}
}

将filename的值修改为[name].js;它的意思是根据入口文件的名称，打包成相同的名称，有几个入口文件，就可以打包出几个出口文件；

服务和热更新配置

首先，配置devServer

devServer:{
    contentBase:path.resolve(__dirname,'dist'),
    host:'localhost',
    compress:true,
    port:1608
}

• contentBase：服务器基本运行路径
• host：服务器运行地址
• compress：服务器压缩式，一般为true
• port：服务运行端口

然后，下载webpack-dev-server模块，

npm install webpack-dev-server --save-dev

最后，配置package.json里的scripts选项

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

运行命令 npm run server ,服务器运行，在浏览器中打开http://localhost:1608，既可以看到页面；

当 npm run server 启动后，服务器有一种监控机制（watch），可以实现热更新；

参考地址：

• https://github.com/zhuangZhou/webpack_demo
• http://jspang.com/2017/09/16/webpack3-2/#15webpackbabel