webpack

webpack 简介

• 一款模块加载器兼打包工具
• 支持AMD/CMD写法
• 处理依赖关系，然后解析出模块之间的依赖，将代码打包
• 把各种资源，都作为模块来使用和处理。
• 比如 js css Less Sass等。。。

http://webpack.github.io/

安装webpack

npm install webpack -g

安装后就在命令行中使用 webpack命令

把依赖写入 package.json

npm install webpack --save-dev

webpack命令

打包命令 webpack entry.js output.js

• entry.js 打包的入口文件
• output.js 打包后的文件

例子：

入口文件: app/index.js

var str = require('./app.js');//通过AMD或CMD语法定义依赖资源
document.body.innerHTML = str;

依赖文件: app/app.js

module.exports = 'hello world';

运行webpack app/index.js bulid/buid.js, 就会将app/index.js和它的依赖app/app.js都打包到同一个文件build/build.js中，所以我们直接调用build/build.js就好

index.html

<script src="build/build.js"></script>

模块加载器(loader)

webpack不只可以打包js, 还可以打包css,图片..等等其他资源， 只是要加载相应的加载器

例子：

入口文件: app/index.js

//通过AMD或CMD语法定义依赖的css资源
//但是需要额外的加载器来处理css, 这里需要两个加载器style-loader和css-loader
//css-loader是用来处理css文件的, style-loader是用来解析css语法的
//加载器的顺序不能打乱，加载器是从右到左依次执行的

require('style-loader!css-loader!./css/style.css');
var str = require('./app.js');
document.body.innerHTML = str;

这样， 我们就把style.css也打包到ouput.js中，再index.html就不需要导入style.css

index.html

<!-- 猜想： css的导入可能是通过output.js动态生成／ -->
<!-- <link rel="stylesheet" href="app/css/style.css"> -->
<script src="build/build.js"></script>

注意： 加载器需要安装，各种不同文件类型的资源, Webpack 有对应的模块 loader

安装加载器

npm install xxx-loader --save-dev

例如：css-loader style-loader 处理css文件和样式

更多参考

webpack配置文件

webpack有很多参数，有时我们使用配置文件更方便

webpack配置文件取名为 webapck.config.js, 我们在配置文件的相同路径下运行webpakc命令，

就会使用配置文件中的信息作为我们的参数

配置文件说明:

webpack.config.js

module.exports = {
    entry: './app/index.js', //打包的入口文件  String|Object
    output: {//配置打包结果     Object
        path: './build/',//定义输出文件路径
        filename: 'build.js', //指定打包文件名称
    },
    module: {//定义了对模块的处理逻辑
        loaders: [//定义了一系列的加载器   Array
            {
                test: /\.css$/,//正则，匹配到的文件名
                //处理匹配到的文件, 这样我们就用js文件写入相应的加载器了
                //直接写require('./css/style.css')
            }

        ]
    },
    resolve:{
        //自动补全识别后缀
        //require('./css/style'); 可以不用写后缀名了
        extensions:['','.js','.css','jsx']   

    }
}

webpack-dev-server

轻量级的服务器

安装webpack-dev-server

npm install webpack-dev-server  -g

安装后在命令行中使用 webpack-dev-server命令

npm install webpack-dev-server  --save-dev

把依赖写入 package.json

使用

webpack-dev-server

自动查找同级目录下webpack.config.js配置文件，进行打包操作，并开启服务器

服务器的默认根目录是当前目录，默认端口是8080

index.html

<!-- 注意不是我们配置文件中build/build.js, 因为并不会真的生成， 而是在内存中， 路径为当前路径下 -->
<script src="build.js"></script>

自动刷新

使用命令 webpack-dev-server --hot --inline 做到自动刷新

在webpack.config.js中配置服务

devServer: {  
    //服务器根目录
    contentBase: './build/'
}

注意 ： hot和inline这两个比较特殊， 必须在命令行中写入

参考

自动生成html文件

html-webpack-plugin

在windows下不支持

安装：

npm install html-webpack-plugin --save-dev

使用:

在webpack.config.js中引入

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

在plugins中配置:

plugins:[
        new htmlWebpackPlugin({
            title:"首页"
        })
    ]

多个打包文件

webpack.config.js

{
    entry: {
        //键值为模块名
        build: './app/index.js',
        build2: './app/index2.js'
    }
    output:{
        path: './build/',
        name: '[name].js'//将文件名换成[name], 根据定义模块名生成相应的输出
    } 
}

那我们在生产html的时候就可以指定具体使用哪个模块

plugins:[
        new htmlWebpackPlugin({
            title:"首页",
            chunks: ['build']
        }),
        new htmlWebpackPlugin({
            title:"build2",
            filename: 'index2.html',//html文件名，不指定默认为index.html
            chunks: ['build2']//指定导入打包后的js文件，可以多个
        })
    ]

babel 转码器

作用: 将ES6代码转为ES5代码

安装babel-cli

npm install babel-cli -g

转换命令：babel app.js --out-file build.js

注意： 直接运行发现，并没有把代码转成es5

还需要在目录下创建.babelrc文件，设置为

preset是预处理的意思

{"presets": ["es2015"]}

并且还需要安装：

npm install --save-dev babel-preset-es2015

webpack+babel

使用webpack将es6转成es5

使用babel-loader

需要安装

npm install babel-loader --save-dev

在webpack.config.js中加入对应的处理

{
    test: /\.js$/,
    loader: 'babel?presets[]=es2015',//传入参数
}

注意在本地也要安装babel-cli

npm install babel-cli --save-dev

webpack+react

首先我们需要安装3个模块

npm install react react-dom babel-preset-react --save-dev

react和react-dom是我们需要的react库, 作为我们需要导入的库文件，

var React = require('react');
var ReactDOM = require('react-dom');

babel-preset-react 是用来转换jsx语法的

在loader中修改为：

{
    test: '/\.js$/',
    //如果没有用es6可以不用加presets[]=es2015预处理
    loader: 'babel?presets[]=es2015&presets[]=react'
}

热加载

如果改变某个组件，不会整体刷新网页，只改变修改的部分

安装 react-hot-loader

npm install react-hot-loader --save-dev

在loader中修改为：

var path = require('path');

{
    test: '/\.js$/',
    loaders: ['react-hot','babel?presets[]=es2015&presets[]=react'],
    include: path.resolve(__dirname, 'react'),
    exclude: '/node_modules/'
}