webpack学习笔记

引言

最近在尝试使用webpack+React进行工程打包。看了很多教程都没有特别详细，在此将学习过程记录，方便自己查看。

安装

webpack是基于node的一个项目，所以首先要安装好node和npm。对于node和npm的安装在此不做赘述。

1.全局安装webpack

1	$ npm install -g webpack

2.建立项目

新建项目路径，在项目路径下初始化package.json文件

1 2	$ cd webpack-demos $ npm init

3.建立webpack-dev-server

在书写项目的过程中，每次修改都进行打包并查看文件很不方便。因此我们可以使用webpack-dev-server
建立自己的本地开发服务器，每当代码修改，会自动打包并刷新浏览器。实为一大神器！

安装webpack-dev-server

1	$ npm install webpack-dev-server --save-dev

成功之后的配置我们会在稍后进行说明

一、开始使用

基础项目结构

目前项目路径里仅仅有package.json文件，我们来新建一些东西，实现基本的项目目录

/app
- index.js
/build
- index.html
package.json
webpack.config.js

其中，webpack.config.js为webpack打包的配置文件。app文件夹下为需要打包的文件。build为打包的输出路径

代码

index.js

1	document.write('<h1>Hello World</h1>');

index.html

<html>
  <body>
    <script type="text/javascript" src="bundle.js"></script>
  </body>
</html>

webpack.config.js

var path = require('path');
module.exports = {
  //打包的入口路径
  entry: [
    path.resolve(__dirname, 'app/main.js')
  ],
  //输出路径
  output: {
    path: path.resolve(__dirname, 'build/'),
    filename: 'bundle.js'
  }
};

按照路径建立好对应文件后，进行打包并启动server服务即可看到效果

1 2	$ webpack $ webpack-dev-server

打开浏览器，访问http://localhost:8080/build/ 即可看到效果

二、配置webpack-dev-server

前面我们使用http://localhost:8080/build/ 进行访问时，当更改index.js并进行保存后，我们并没有发现浏览器
自动进行刷新，并且每次敲webpack-dev-server未免有些费劲。在此我们对webpack-dev-server进行一些设置。

在config中添加配置,支持自动捕获修改，让浏览器自动刷新

module.exports = {
  devServer: {
    historyApiFallback: true,
    hot: true,
    inline: true,
    progress: true,
  },
}

再在package.json里配置npm的自定义命令：

"scripts": {
  "start": "webpack-dev-server --hot --inline"
},

在项目根目录下输入 npm start,访问 http://localhost:8080/ 即可。

###