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

一、创建基本目录结构

  • 新建项目

新建项目工程:reactProj
websorm环境下,react+webpack搭建项目环境_第1张图片

  • 配置jsx

websorm环境下,react+webpack搭建项目环境_第2张图片

websorm环境下,react+webpack搭建项目环境_第3张图片

  • 安装 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
  • 执行完成后文件结构:

websorm环境下,react+webpack搭建项目环境_第4张图片


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

根据个人习惯建立目录结构:
websorm环境下,react+webpack搭建项目环境_第5张图片

  • 新建模块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(, $('#content')[0]);

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

  • 新建html页面:index.html

<head>
  <meta charset="UTF-8">
  <title>react demotitle>
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;
 }
  • 完整的目录结构:
    websorm环境下,react+webpack搭建项目环境_第6张图片

  • 运行项目

websorm环境下,react+webpack搭建项目环境_第7张图片

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

  • 网页显示结果:

websorm环境下,react+webpack搭建项目环境_第8张图片

你可能感兴趣的:(web前端,nodejs)