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

你可能感兴趣的:(webpack 3.X学习之基本配置)