webpack+babel+react操作小结

时间：2023-03-10 07:09:07
webpack+babel+react操作小结

最近学习了一下Webpack，个人感觉还是非常实用的，现在总结一下自己的学习笔记。

什么是 Webpack

Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资

webpack+babel+react操作小结

Webpack 的特点

1、代码拆分

Webpack 有两种组织模块依赖的方式，同步和异步。异步依赖作为分割点，形成一个新的块。在优化了依赖树后，每一个异步区块都作为一个文件被打包。

2、Loader

Webpack 本身只能处理原生的 JavaScript 模块，但是 loader 转换器可以将各种类型的资源转换成 JavaScript 模块。这样，任何资源都可以成为 Webpack 可以处理的模块。

3、智能解析

Webpack 有一个智能解析器，几乎可以处理任何第三方库，无论它们的模块形式是 CommonJS、 AMD 还是普通的 JS 文件。甚至在加载依赖的时候，允许使用动态表达式 require("./templates/" + name + ".jade")。

4、插件系统

Webpack 还有一个功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的，还可以开发和使用开源的 Webpack 插件，来满足各式各样的需求。

快速运行

安装nodejs

安装npm (NodeJS包管理和分发工具)

  npm常用命令

  npm init 创建package.json文件

  npm install <module-name> -g/--save-dev/--save  安装模块

  npm update <module-name >  更新模块

  npm uninstall <module-name > 卸载模块

安装webpack

用 npm 安装 Webpack

        npm install webpack -g

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

把依赖写入 package.json

        npm install webpack --save-dev

webpack命令

打包命令 webpack app.js output.js

        app.js       打包的入口文件

        output.js    打包后的文件

模块加载器（loader）

各种不同文件类型的资源, Webpack 有对应的模块 loader

    安装加载器

        npm install xxx-loader --save-dev

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

    更多参考：
http://webpack.github.io/docs/using-loaders.html

webpack的配置项说明

     entry：     打包的入口文件  String|Object

    output：     配置打包结果     Object

      path：     定义输出文件路径

  filename：     指定打包文件名称

    module：     定义了对模块的处理逻辑     Object

   loaders：     定义了一系列的加载器   Array

            [{

                    test: 正则，匹配到的文件后缀名

                    loader/loaders：string|array，处理匹配到的文件

                    include：String|Array  包含的文件夹

                    exclude：String|Array  排除的文件夹

            }]

    resolve:{

        extensions:['','.js',".css",“jsx”]  //自动补全识别后缀

    }

webpack-dev-server

轻量级的服务器

修改文件源码后，自动刷新页面就能把修改同步到页面上

安装webpack-dev-server

           npm install webpack-dev-server  -g

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

把依赖写入 package.json

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

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

在webpack.config.js中配置服务

自动生成html文件

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

 使用

在webpack.config.js中引入

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

在plugins中配置

    plugins:[

        new htmlWebpackPlugin({

            title:"My first react app",

            chunks:[“index”]

        })

    ]

         babel作用

将ES6代码转为ES5代码   


官网：http://babeljs.io/

安装babel-cli

        npm install babel-cli -g

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

把依赖写入 package.json

        npm install babel-cli --save-dev

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

使用es2015 

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

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

      {"presets": ["es2015"]}

安装babel-loader加载器

使用webpack处理文件中ec6语法

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

        {

            test: /\.js$/

            loader：'babel',

            query:['es2015']

        }

安装react模块

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

{"presets": ["es2015","react"]}

热加载

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

在loader中修改为：

     loaders: ['react-hot','babel?presets[]=es2015&presets[]=react']

     include:path.resolve(__dirname,"react")

相关文章