webpack入门

---恢复内容开始---

webpack简单点来说就就是一个配置文件，所有的魔力都是在这一个文件中发生的。这个配置文件主要分为三大块

entry 入口文件让webpack用哪个文件作为项目的入口
output 出口让webpack把处理完成的文件放在哪里
module 模块要用什么不同的模块来处理各种类型的文件

主要参考了博文：

moudule.js:338 throw err; Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
　　创建Webpack简单项目遇见的那些事儿
　　 webpack-dev-server 使用方法，看完还不会的来找我~

webpack和webpack-dev-server安装配置（遇到各种问题的解决方法）

入门Webpack，看这篇就够了

开始使用Webpack

初步了解了Webpack工作方式后，我们一步步的开始学习使用Webpack。

安装

Webpack可以使用npm安装，新建一个空的练习文件夹（此处命名为webpack sample progect），在终端中转到该文件夹后执行下述指令就可以完成安装。

//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack

正式使用Webpack前的准备

新建一个webpack文件夹，在webpack文件夹中创建demo文件夹。使用 cd /webpack/demo 进入到该文件夹中，在终端中使用npm init命令可以自动创建这个package.json文件
npm init
输入这个命令后，终端会问你一系列诸如项目名称，项目描述，作者等信息，不过不用担心，如果你不准备在npm中发布你的模块，这些问题的答案都不重要，回车默认即可。

项目结构

现在项目里面就有一个package.json，我们多加一点东西，慢慢丰富它的内容。

/app
- index.js
- sub.js
package.json
webpack.config.js

添加了两个js文件，添加了最重要的webpack的配置文件，我们还是从非常简单的hello world开始玩起，webpack原生直接支持AMD和CommonJS两种格式，如果你想使用ES6的风格，这点以后再提。

JS代码

sub.js
//我们这里使用CommonJS的风格
function generateText() {
var element = document.createElement('h2');
element.innerHTML = "Hello h2 world";
return element;
}

module.exports = generateText;
index.js
var sub = require('./sub');
var app = document.createElement('div');
app.innerHTML = '<h1>Hello World</h1>';
app.appendChild(sub());
document.body.appendChild(app);

配置Webpack

现在开始配置webpack，目标是把这两个js文件合并成一个文件. 我们可以自己在build文件夹里面手动建一个index.html文件夹，然后再把合并以后的js引用在里面，但是这样有些麻烦，所以我们这里安装一个plugin，可以自动快速的帮我们生成HTML。
npm install html-webpack-plugin --save-dev
好有了这个插件开始写config文件

var path = require('path');
var HtmlwebpackPlugin = require('html-webpack-plugin');
//定义了一些文件夹的路径
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'app');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');

module.exports = {
//项目的文件夹可以直接用文件夹名称默认会找index.js 也可以确定是哪个文件名字
entry: APP_PATH,
//输出的文件名合并以后的js会命名为bundle.js
output: {
path: BUILD_PATH,
filename: 'bundle.js'
},
//添加我们的插件会自动生成一个html文件
plugins: [
new HtmlwebpackPlugin({
title: 'Hello World app'
})
]
};
然后在项目根目录运行
webpack

出现上述问题是由于全局安装导致的，可以在本项目中安装，npm install webpack，在本项目中安装了webpack之后，再运行webpack，如果出错，在package.json中配置

配置webpack-dev-server

上面任务虽然完成了，但是我们要不断运行程序然后查看页面，所以最好新建一个开发服务器，可以serve我们pack以后的代码，并且当代码更新的时候自动刷新浏览器。

安装webpack-dev-server

npm install webpack-dev-server

安装完毕后在config中添加配置

module.exports = {
  ....

devServer: {
    historyApiFallback: true,
    inline: true,//注意：不写hot: true，否则浏览器无法自动更新；也不要写colors:true，progress:true等，webpack2.x已不支持这些
},

 ... }

然后再package.json里面配置一下运行的命令,npm支持自定义一些命令

...
"scripts": {
  "start": "webpack-dev-server --hot --inline"
},
...
好了，万事具备了，在项目根目录下输入npm start,一堆花花绿绿的信息后server已经起来了，在浏览器里面输入http://localhost:8080 发现伟大的hello world出现了，在js里面随便修改一些输出然后保存, boom!浏览器自动刷新，新的结果出现了。

添加CSS样式

现在来添加一些样式，webpack使用loader的方式来处理各种各样的资源，比如说样式文件，我们需要两种loader，css-loader 和 style－loader，css-loader会遍历css文件，找到所有的url(...)并且处理。style-loader会把所有的样式插入到你页面的一个style tag中。

安装我们的loader

npm install css-loader style-loader --save-dev

配置loader，在webpack.config.js中

  devServer: {
    historyApiFallback: true,
    hot: true,
    inline: true,
    progress: true,
  },
  ...
  module: {
    loaders: [
      {
        test: /.css$/,
        loaders: ['style', 'css'],
        include: APP_PATH
      }
    ]
  },
  ...
  plugins: [
    new HtmlwebpackPlugin({
      title: 'Hello World app'
    })
  ]

看loaders的书写方式，test里面包含一个正则，包含需要匹配的文件，loaders是一个数组，包含要处理这些程序的loaders，这里我们用了css和style，注意loaders的处理顺序是从右到左的，这里就是先运行css-loader然后是style-loader.

新建一个样式文件 main.css

h1 {
    color: red;
}

记得在入口文件index.js中引用

require('./main.css');

---恢复内容结束---