webpack打包调试react并使用babel编译jsx配置方法

http://lxj8749.iteye.com/blog/2287074

**********************************************

安装webpack

npm i webpack --save-dev

如果使用 -g参数,可以安装到全局使用,在当前目录安装,可执行文件为 ./node_modules/.bin/webpack

配置webpack.config.js

    var path = require('path');  
    module.exports = {  
        entry: path.resolve(__dirname, 'src/index.js'),  
        output: {  
            path: path.resolve(__dirname, 'build'),  
            filename: 'bundle.js',  
        },  
    };  

 entry为打包的入口文件,output为打包后生成的文件名及路径。

源代码可以编写成多个文件,然后由入口文件调用组装,相互独立的组件最好分别单独写在一个文件中

打包源文件

在当前目录执行webpack 或 ./node_modules/.bin/webpack 命令,就可以将源文件打成生成build/bundle.js文件,网页中直接作用来调用即可

本地开发调试

 先安装 webpack-dev-server

npm i webpack-dev-server --save 

在package.json文件中scripts下面添加相应的配置(可以使用npm init来生成package.json文件)

    {  
      "scripts": {  
        "build": "webpack",  
        "dev": "webpack-dev-server  --port 8080  --inline --content-base ./build"  
      }  
    }  

--inline加入该参数可以实现自动刷新,

在当前目录执行 npm run dev,执行完成后,在文件夹build中新建index.html,加入如下代码

    doctype html>  
    <html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>teststitle>  
    head>  
    <body>  
    <div id="react-content">div>  
    <script src="./bundle.js">script>  
    body>  
    html>  

在浏览器中打开 http://localhost:8080 就可以实时查看效果,修改后代码后,需要刷新才能查看到效果。执行npm run build可以打包,相当于执行webpack命令

Cannot GET / 错误

是由于package.json中的

"dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"

build文件夹不存在

配置react和babel

安装react

npm install react --save 

安装babel相关组件,让webpack自动转换jsx,

npm install babel-loader babel-core babel-preset-react babel-preset-es2015 --save-dev 

 在webpact.config.js的module的loaders中增加相应配置

    module: {  
          loaders: [  
            {  
              test: /\.jsx?$/,  
              exclude: /(node_modules|bower_components)/,  
              loader: 'babel', // 'babel-loader' is also a legal name to reference  
              query: {  
                presets: ['react', 'es2015']  
              }  
            }  
          ]  
     }  

 配置完成后,在js或jsx文件中就可以直接写jsx语法

 

babel编译es6和jsx

先安装babel-cli

npm install -g babel-cli 

再执行

babel src -d dist --presets react,es2015 

 src 为源文件目录,dist为编译输出目录,--presets 预置插件

 

支持es7语法

es7语法分四个阶段分别对应四个插件

babel-preset-stage-0

babel-preset-stage-1

babel-preset-stage-2

babel-preset-stage-3

选择一个加载就能正确解析es7语法

 

配置.less

先安装less编译器

npm install less css-loader less-loader  style-loader --save-dev

在webpact.config.js的module的loaders中增加相应配置

{test: /\.less$/,loader: "style!css!less"} 

配置图片及字体文件

 安装url-loader,修改webpact.config.js的module的loaders中增加相应配置

 

    {test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=50000&name=[path][name].[ext]'}  

 

react,babel只能安装在当前目录,安装在全局无效,提交到github时需要把这些模块排除掉

 

npm安装依赖

在当前目录执行npm install会根据当前目录下的package.json文件,把需要的依赖都下载安装

 

 npm升级到3

npm install [email protected]

DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>菜鸟教程 React 实例title>
  head>
  <body>
    <div id="example">div>
    <script src="bundle.js">script>
  body>
html>
import React from 'react';
import ReactDOM from 'react-dom';
import {Button} from 'uxcore';

ReactDOM.render(
const path = require('path');

module.exports = {
  entry: './src/index.jsx',
  
      module: {  
          loaders: [  
            {  
              test: /\.jsx?$/,  
              exclude: /(node_modules|bower_components)/,  
              loader: 'babel-loader', // 'babel-loader' is also a legal name to reference  
              query: {  
                presets: ['react', 'es2015']  
              }  
            }  
          ]  
     }  ,
     
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

 

 

转载于:https://www.cnblogs.com/zhao1949/p/7307382.html

你可能感兴趣的:(webpack打包调试react并使用babel编译jsx配置方法)