websorm环境下，react+webpack搭建项目环境

来源：互联网发布：ubuntu 12.04 qq 编辑：程序博客网时间：2024/05/16 18:46

一、创建基本目录结构

新建项目

新建项目工程：reactProj
这里写图片描述

配置jsx

这里写图片描述

安装 webpack
在此之前你应该已经安装了 node.js.

npm install webpack -g

参数-g表示我们将全局(global)安装 webpack, 这样你就能使用 webpack 命令了.

webpack 也有一个 web 服务器 webpack-dev-server, 我们也安装上

npm install webpack-dev-server -g

webpack 配置文件
新建文件：webpack.config.js （webpack 使用一个名为 webpack.config.js 的配置文件【必须】
）

//process.noDeprecation = true;var path = require('path');var BrowserSyncPlugin = require('browser-sync-webpack-plugin');var HtmlWebpackPlugin=require('html-webpack-plugin');module.exports = {  entry: {//输入文件    'index': './src/js/index.js'//‘index’是生成文件的名称，，多个生成文件名将匹配output里的[name],'index'后面的需要被加载到index的文件的路径，可用数组方式加载多个文件，如['./src/js/index.js'，'./src/js/base.js']  },  output: {//输出文件    path: 'build/js',// 输出js和图片的目录    filename: '[name].bundle.js'  },  module: {//模块加载器配置    loaders: [{      test: /\.less$/,//正则匹配拓展名为···的文件      include: path.join(__dirname, './src/less'),//需要被加载文件的路径      loader: 'style-loader!css-loader!less-loader'    }, {      test: /\.html$/,      exclude: /node_modules/,//这个文件除外      loader: 'html-loader'    },{      test: /\.js?$/,      include: path.join(__dirname, './src/js'),      loader: 'babel-loader'    }, {      test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,      loader: 'url-loader?limit=10000&minetype=srclication/font-woff'    }, {      test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,      loader: 'file-loader'    },{      test: /\.(png|jpg)$/,      loader: 'url-loader?limit=8192' // 内联的base64的图片地址，图片要小于8k，直接的url的地址则不解析    }]  },  plugins: [    //单独生成html文件    new HtmlWebpackPlugin({      filename: '../index.html',//生成的html及存放路径，相对于path      template: './src/index.html',//载入文件及路径      publicPath: "js/",//这是build文件下html文件引用js文件的路径      chunks: ['index'],//需要引入的chunk，不配置就会引入所有页面的资源    }),    // 使用browser-sync实时刷新页面    new BrowserSyncPlugin({      host: 'localhost',      port: 3000,      server: { baseDir: ['./build/'] }//会默认访问./build/index.html    })  ]};

新建文件：package.json （需要引入的相关依赖【必须】）

{  "name": "react-es6-less-bootstrap-webpack-template",  "version": "1.0.0",  "description": "A simple webpack  template.",  "repository": {},  "scripts": {    "start": "webpack -d --progress --colors --watch",    "build/":"webpack  -p"  },  "dependencies": {    "bootstrap": "^3.3.5",    "react": "^0.14.0",    "react-dom": "^0.14.1",    "jade": "1.11.0",    "jquery": "^3.2.1"  },  "devDependencies": {    "babel-core": "^5.8.30",    "babel-loader": "^5.3.2",    "browser-sync": "^2.11.2",    "browser-sync-webpack-plugin": "^1.0.1",    "css-loader": "^0.21.0",    "file-loader": "^0.8.4",    "html-loader": "^0.4.3",    "html-webpack-plugin": "^2.7.2",    "less": "^2.5.3",    "less-loader": "^2.2.1",    "style-loader": "^0.13.0",    "url-loader": "^0.5.6",    "webpack": "^1.12.2"  },  "author": "",  "license": ""}

执行node，安装packpage.json中的插件

npm install

执行完成后文件结构：

下面就是项目开发中的代码了

根据个人习惯建立目录结构：
这里写图片描述

新建模块js文件：hiDom.js

import React from 'react';import '../less/common.less';export default class HiDoms extends React.Component{    render(){        return(            <div className="hiDoms">                hi react !            </div>        )    }}

新建js文件：index.js

import $ from 'jquery';import React from 'react';import { render } from 'react-dom';import HiDoms from './hiDom';render(<HiDoms />, $('#content')[0]);

注：这里的HiDoms节点名可以任意命名，但首字母必须大写

新建html页面：index.html

<!DOCTYPE html><head>  <meta charset="UTF-8">  <title>react demo</title></head><body><div id="content"></div></body></html>

新建less文件：common.less

.hiDoms {   align-items: center;   background: #ff6600;   color: black;   font-size: 32px;   text-align: center;   padding: 2px; }

完整的目录结构：
运行项目

这里写图片描述

开发模式 npm run start
生产模式 npm run build

网页显示结果：

这里写图片描述

阅读全文

0 0