Webpack,打包工具使用

安装：基于nodejs下面安装

命令：npm install webpack -g或者 npm install webpack -g --registry=https://registry.npm.taobao.org

webpack 简介

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

http://webpack.github.io/

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

把依赖写入 package.json

npm install webpack --save-dev

webpack命令
打包命令 webpack entry.js output.js

entry.js 打包的入口文件
output.js 打包后的文件//运行命令后生成的js文件，

例子：导入js文件

入口文件: index.js

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

依赖文件: app.js
module.exports = 'hello world';
运行`webpack index.js output.js, `就会将index.js和它的依赖app.js都打包到同一个文件output.js中，所以我们直接调用output.js就好

index.html//里面导入打包好的js文件，

模块加载器(loader)

webpack不只可以打包js, 还可以打包css,图片..等等其他资源， 只是要加载相应的加载器
在本地安装：npm install style-loader 和npm install css-loader;//会安装在 node_modules里面
例子：导入css 或者图片文件
1，在入口文件导入css文件，需要导入加载器
require('style-loader!css-loader!./index.js')

入口文件: app/index.js

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

require('style!css!./css/style.css');
var str = require('./app.js');
document.body.innerHTML = str;
这样， 我们就把style.css也打包到ouput.js中，再index.html就不需要导入style.css

index.html




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

安装加载器

npm install xxx-loader --save-dev
例如：css-loader style-loader 处理css文件和样式

更多参考

webpack配置文件
配置之后，直接运行 webpack命令跑起来
使用webapck.config.js把所有配置放在一起，
webpack有很多参数，有时我们使用配置文件更方便
webpack配置文件取名为 webapck.config.js, 我们在配置文件的相同路径下运行webpack命令，

就会使用配置文件中的信息作为我们的参数
//配置服务器的更目录后，就只能访问src下面的文件
contentBase: './src',

配置文件说明:

文件名：webpack.config.js

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

        ]
    },
    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

自动刷新

如果没有安装在全局中，安装在node_modules里
在根目录下使用命令：..\node_modules\.bin\webpack-dev-server --hot --inline
安装在全局中
使用命令webpack-dev-server --hot --inline做到自动刷新

注意： 使用webpack-dev-server命令生产的打包文件是在内存中，不会真的生成打包文件(build/build.js), 而且路径是在当前路径下, 所以我们应该这么调用

index.html



在webpack.config.js中配置服务

devServer: {  
    //服务器根目录
    contentBase: './build/'
}
注意 ： hot和inline这两个比较特殊， 必须在命令行中写入

参考

自动生成html文件

html-webpack-plugin

安装：

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], 根据定义模块名生成相应的输出(build.js,build2.js)
    } 
}

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

plugins:[
        new htmlWebpackPlugin({
            title:"首页",
            chunks: ['build']//生成的HTML,并自动导入生成的js文件
        }),
        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/'
}

浏览器调试

1，安装chrome 的插件，react dev tools
2，在配置文件，配置：
devtool: 'source-map'

使用react的基本结构

注意json 数据文件的格式

[{
    "userName": "xxxx",
    "content": "yyyy",
    "id": 1
}, {
    "userName": "ddddd",
    "content": "ccccc",
    "id": 2
}, {
    "userName": "ddddd",
    "content": "ccccc",
    "id": 3
}]

1.入口文件：index.jsx

require('./style.css');//导入css文件
//如果使用bootstrap,需要导入的组件,要先在库里面安装后才能使用
require('bootstrap/dist/css/bootstrap.css');
//导入json数据文件
var data = require('./data.json');

var container=document.querySelector('.container');//获取dom元素
var React=require('react');//导入react库，
var ReactDOM=require('react-dom');//导入react-dom库，才能使用ReactDOM
var MainComponent=require('./MainComponent');//导入定制的组件
//图片路径的添加方式
data.forEach(function(item,i){
    item.imgUrl=require('./img/1.jpg')//给ImgData的每项添加一个imgUrl属性，为图片路径
})

ReactDOM.render(
    ,
    container
)

2.配置文件webpack.config,js

var path = require('path');//配置出口文件路径
module.exports = {
    entry: './src/index.jsx',
    output: {
        path: './build/',
        filename: 'build.js'
    },
    module: {
        loaders: [{
            test: /\.css$/,
            loaders: ['style-loader', 'css-loader']

        }, {
            test: /\.jsx$/,
            loaders: ['babel-loader?presets[]=es2015&presets[]=react']
        },{
          //导入bootstrap需要配置的文件
        test: /\.(png|jpg|gif|woff|woff2|eot|ttf|svg)$/,
            loaders: 'url-loader?limit=8192'
        }, {//导入json需要配置的信息
            test: /\.json$/,
            loaders: ['json-loader']
        }]
    },
//改变端口号
    devServer：{
        contentBase:'./src',//改变服务器的根目录
        port:4000
}，
    //调试工具
    devtool:'source-map',
    resolve: {
        //自动补全识别后缀
        //require('./css/style'); 可以不用写后缀名了
        extentions: ['', '.js', '.css', '.jsx']
    }
}