webpack基本使用

安装webpack

全局安装webpac,使用npm,推荐使用cnpm

$ cnpm install webpack -g

检查webpack是否安装成功

$ webpack

基本配置

使用npm初始化项目

$ cnpm init
//输入各种参数

局部安装webpack

$ cnpm install --save-dev webpack

新建webpack配置文件，命名为webpack.cofig.js

// ./webpack.config.js
module.exports = {
entry: "./app.js",  //程序入口
output: {
path: './build',    //构建输出路径
filename:'main.js'  //构建输出的文件名
}
}

开始测试，写一个index.html，创建一个js目录，里面创建app.js文件。修改webpack.config.js

//app.js
console.log("this is app.js");

module.exports = {
entry: "./js/app.js",
output: {
path: './build',
filename:'main.js'
}
}

在命令行里进入到当前项目根目录，运行webpack命令，会在根目录下生成build目录，该目录下main.js是打包后的js文件

实现自动刷新，代码热加载

为了实现webpack自动刷新，需要安装webpack服务器：

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

运行webpack服务器，需要先进行配置，在webpack.config.js中添加如下配置：

devServer: {
contentBase: "./public",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true//实时刷新
}

在控制台使用命令运行服务器：

$ webpack-dev-server

然后可以在浏览器窗口打开http://localhost:8080

在简书：《webpack基本使用》