react和webpack

webpack介绍
webpack常用loader
webpack dev server

webpack介绍

webpack是一个前端资源打包工具。

首先，创建一个目录，在当前目录下执行：
npm init
生成package.json文件。

其次安装项目中需要引入的react和webpack:
npm install react --save
–save表示将依赖直接同步到package.json文件中，dependencies…相关即为安装好的依赖，下载的依赖放在node-module文件夹下。由于很多从github上下载的项目都是没有node_module文件夹的。这时需要手动执行以下：
npm install
这个指令表示根据package.json文件来下载依赖。

接下来编写webpack的配置文件：webpack.config.js为webpack的默认配置文件名。其内容为：

module.exports= {
    entry: './app/index.js',
    output:{
        path: './dist',
        filename:'bundle.js'
    }
}

entry表示入口，output为输出。为此在项目目录下建立dist文件夹和app文件夹，并在app目录下建一个index.js文件，代码如下：

var react=require('react');
console.log(react.version);

上述代码输出了react的版本号。
代码都写完了，接下来在项目路径下执行:

webpack

即可对代码打包，生成一个bundle.js文件，最后建立一个index.html文件，来调用这个生成的打包文件。代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>hello world</title>
    </head>
    <body>
        <div id="root">hello world</div>
        <script type="text/javascript" src="dist/bundle.js"></script>
    </body>
</html>

最后在浏览器来输入地址来查看，果然能看到日志信息。
file:///G:/react.js/react-music-player/index.html

webpack常用loader

常用loader如babel-loader，将ES6等高版本语法转成ES5。还有其他的css-loader,less-loader等。
首先对webpack.config.js文件进行修改，添加loader。修改后的代码如下：

module.exports= {
    entry: './app/index.js',
    output:{
        path: './dist',
        filename:'bundle.js'
    },
    module: {
        resolve:{
            extensions:['','.js','.json']
        },        
        loaders: [
            {
              test: /\.js$/,
              exclude: /node_modules/,
              loader: "babel-loader",
              query:
                {
                  presets:['react','es2015']
                }
            },
            {
                test: /\.json?$/,
                loader: 'json'
            },
            {
                test: /\.css$/,
                loader: "style!css"
            },
            {
                test: /\.less/,
                loader: 'style-loader!css-loader!less-loader'
            }
        ]
    }
}

上述代码中，test属性是进行匹配的正常表达式，第一个loader就是针对js文件进行版本更换的babel-loader，exclude表示不需要处理的目录
后面有针对css的less。less是css的一个新框架。

接下来我们修改index.js文件，使用ES6的import语法以及less形式，代码如下：

import React from 'react';
import './index.less';

console.log(react.version);

index.less代码如下：

body{
    #root {
        font-size: 30px;
    }
}

代码修改完后重新打包：webpack
在浏览器中打开index.html页面发现字体大小的确发生变化了，说明生效了。

webpack dev server

webpack是一个小型的node服务器，它为通过webpack打包生成的资源文件提供web服务。通过webpack dev server来搭建开发环境，实现：
1. 搭建本地服务器。
2. 自动刷新。
使用webpack dev server就不需要像之前一样每次都重新编译，并且浏览器的地址是本地生成的静态文件地址，并且每次都手动刷新页面。

webpack介绍

webpack常用loader

webpack dev server

猜你喜欢