webpack基本使用

安装及配置webpack

安装webpack

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

$ cnpm install webpack -g

2. 检查webpack是否安装成功

$ webpack

基本配置

1. 使用npm初始化项目

$ cnpm init
//输入各种参数

2. 局部安装webpack

$ cnpm install --save-dev webpack

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

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

4. 开始测试，写一个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'
    }
}

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

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

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

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

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

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

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

$ webpack-dev-server

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