安装及配置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
