webpack的配置（一）

node&npm

下载node.js：https://nodejs.org/zh-cn/

安装完成之后，任何一个目录都可以用npm命令

node -v 可以查看node.js的版本信息，同时也是检验node.js是否安装成功

npm：NodeJS包管理和分发工具

如果Npm太慢，安装阿里的cnpm，执行下面命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org

npm -v 可以查看npm版本信息

一些常用的npm命令：

npm install <name>   安装node.js的依赖包，后面加版本号的方式可以安装指定版本

npm install <name> -g    将包安装到全局环境

但是代码中，直接通过require()的方式是没有办法调用到全局安装的包的。全局的安装是供命令行使用的，就好像全局安装了vmarket后，就可以在命令行中直接运行vm命令

npm install <name> --save-dev    安装的同时，并将其写入package.json依赖字段devDependencies中

项目路径中如果有package.json文件是，直接使用npm install方法就可以根据dependencies配置安装所有的依赖包，这样代码提交到GitHub时，就不用提交node_modules这个文件夹了

npm init     会引导你创建一个package.json文件，包括名称，版本，作者这些信息等

npm uninstall <name>    卸载

npm update <name>     更新

npm ls    列出当前安装的了所有包 

npm root    查看当前包的安装路径

npm root -g     查看全局的包的安装路径

npm help  帮助

webpack

webpack简介

一款模块加载器兼打包工具

支持AMD，CMD写法

处理依赖关系，然后解析出模块之间的依赖，将代码打包

吧各种资源，都作为模块来使用和处理

比如：js css less sass

安装webpack

npm install webpack -g    安装后就能在命令行中使用webpack命令

npm install webpack --save-dev   把依赖写入package.json里

假如我们的文件夹目录如下：

其中，我们的入口文件是app下的index.js
需要将其他的js文件都引入到这个文件中，有两种方法

//方法一
define(["./app.js"],function (str) {
    document.body.innerHTML = "<div>welcome use webpack</div><div>"+str+"</div>";
});
//方法二：常用
var str = require('./app.js');
document.body.innerHTML = "<div>welcome use webpack</div><div>"+str+"</div>";

将我们的入口文件打包成build下的build.js文件
webpack app/index.js build/build.js


在入口文件中引入css文件
首先要先使用npm安装css-loader和style-loader模块加载器处理css文件和样式，并且写入依赖
npm install css-loader style-loader --save-dev
然后在入口文件中编写

require("style-loader!css-loader!./css/reset.css");
require("style-loader!css-loader!./css/style.css");

注意：在现在的新版本中，不允许省略loader，会报错，必须写全称。而且必须style在前，css在后，因为解析的时候是从右往左的
各种不同文件类型的资源，webpack有对应的模块
更多参考：http://webpack.github.io/docs/using-loaders.html

webpack配置说明

手动在文件夹的根目录下添加webpack.config.js文件，并配置，配置好之后，当我们再次打包文件的时候，就可以直接输入命令webpack就行了，方便

module.exports = {
    entry: {  //打包的入口文件
        build:"./app/index.js"
    },
    output: {  //打包结果的文件
        filename : '[name].js',//输出文件名
        path : __dirname + '/build',//输出文件路径
    },
    module: {  //对模块的处理逻辑 对象
        loaders: [  //一系列的加载器 数组
            {
                test: /.css$/,  //正则，匹配到的文件的后缀名
                loaders: ['style-loader', 'css-loader'],  //匹配处理到的文件
                exclude: "/node_modules/"   //排除的文件夹
            }
        ]
    },
    resolve:{  //自动补全后缀名
        extensions:['.js','.css','.jsx']
    }
};

然后在引入css的地方，修改成这样就好了
不需要再写loader模块加载器，也不需要写后缀名

require("./css/reset");
require("./css/style");

webpack-dev-server

轻量级的服务器
修改文件后，自动刷新页面就能把修改同步到页面上
安装webpack-dev-server
一定要先全局安装，要不然后面不能使用webpack-dev-server命令
npm install webpack-dev-server -g
把它写入依赖中
npm install webpack-dev-server --save-dev
使用命令
webpack-dev-server --inline 就可以做到自动更新了
由于这句话比较长，可以在package.json文件的scripts中添加“build”

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack-dev-server --inline"
  },

那么只要输入命令npm run build 就可以开启服务了，在浏览器中输入http://localhost:8080就可以访问那个页面了

如果当8080端口被占用，可以使用webpack-dev-server --port 3000 --inline修改端口号为3000

也可以在webpack.config.js中配置

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

使用webpack-dev-server命令开启服务，就可以做到自动更新了

不带参数运行上面的命令，会默认读取webpack.config.js进行打包

当Ctrl+c就可以选择退出服务

html-webpack-plugin

自动生成html文件

安装：npm install html-wenpack-plugin --save-dev

使用：在webpack.config.js中引入

var htmlWebpackPlugin = require("html-webpack-plugin");

在plugin中配置：

    plugins:[
        new htmlWebpackPlugin({
            title: "my first html",  //生成的html文档的标题
            filename: "class.html",   //输出文件的文件名称，默认为index.html，不配置就是该文件名；
            // 此外，还可以为输出文件指定目录位置（例如'html/index.html'）
            chunks:["build"]    //允许插入到模板中的一些chunk，不配置此项默认会将entry中所有的thunk注入到模板中。
            // 在配置多个页面时，每个页面注入的thunk应该是不相同的，需要通过该配置为不同页面注入不同的thunk；
        })
    ]

这样，利用webpack打包后，就好在build目录下就会生成class.html文件，里面有引入build.js

配置多个html页面

html-webpack-plugin的一个实例生成一个html文件，如果单页应用中需要多个页面入口，或者多页应用时配置多个html时，那么就需要实例化该插件多次；

即有几个页面就需要在webpack的plugins数组中配置几个该插件实例：

    ...
    plugins: [
        new HtmlWebpackPlugin({
             template: 'src/html/index.html',
              excludeChunks: ['list', 'detail']
        }),
        new HtmlWebpackPlugin({
            filename: 'list.html',
            template: 'src/html/list.html',
            thunks: ['common', 'list']
        }), 
        new HtmlWebpackPlugin({
          filename: 'detail.html',
          template: 'src/html/detail.html',
           thunks: ['common', 'detail']
        })
    ]
    ...

如上例应用中配置了三个入口页面：index.html、list.html、detail.html；并且每个页面注入的thunk不尽相同；类似如果多页面应用，就需要为每个页面配置一个；

我们默认用webpack命令打包的时候，使用的是webpack.config.js文件，

因为我们会有很多的配置文件，

如要指定使用某个配置文件打包，则需要在package.json文件中添加命令

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack-dev-server --inline",
    "start_html": "webpack --config webpack.html.config.js",
    "start_es6": "webpack --config webpack.es6.config.js"
  },

然后在命令行中使用命令 npm run start_html  、 npm run start_es6就可以根据不同的配置文件打包了

就会生成对应的打包文件了