webpack2.0搭建react框架环境

来源：互联网发布：js判断是否等于0 编辑：程序博客网时间：2024/06/05 00:44

学到React,一直使用着原有的搭建脚手架,create-react-app ,但是使用了这么久,心理难免不是滋味,毕竟自己一直对webpack一知半解,所以我花了一天的时间,看了不少博客,但是博客大多不统一,所以自己也搭建了半天还没搭建起来,后来自己看官网一步一步搭建,一步一步领悟,总算搭建起React环境,途中也踩了不少的坑..在这里写下配置,希望路过的,不要在遇到这些坑.

开始入门

打开你的终端创建一个新文件夹.你可以随意命名这个文件夹.进入文件夹后通过 yarn init 命令初始化项目, yarn init 就像 npm init 一样,会给你提示,只要不停按回车或按你的意愿配置就可以了.

mkdir webpackcd webpacknpm init

当 npm init 命令完成后你能看到你的文件夹(此例中为’hello-world-react’)多了一个新的文件 package.json

安装及配置Webpack

npm install  --save-dev webpack

现在我们已经安装了webpack了,我们需要一个配置文件来告诉webpack应该要做什么.在项目文件夹中创建一个新文件 webpack.config.js ,然后用你喜欢的编辑器打开它.

在webpack目录下创建一个 webpack.config.js

mkdir webpack.config.js

结构目录如下图:

配置webpack.config.js

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

entry :指定入口文件,制定src里的输出位置
output: 指定打包后的文件存放位置
其中的[hash]指的是哈希值.

babel设置

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

安装了我们需要的babel以来,babel-preset-es2015 和 babel-preset-react ,presets是babel的插件,它会告诉babel需要把哪些部分转化成原生的javascript.
然后我们需要去设置babel,设置babel可以通过添加一个.babelrc
也可以通过package.json 来修改
添加以下内容

   /*     ./.babelrc*/  {    "presets":[        "es2015", "react"    ]}

当webpack调用 babel-loader 时它会知道该对文件做什么处理了.

当前的结构目录如下图:

这里写图片描述

接下来写下代码吧,试试能否运行 .

编辑 index.js

/*    ./src/index.js*/console.log('成功运行!!')

编辑 index.html

<!--      index.html--><!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>React App Setup</title>  </head>  <body>    <div id="root">    </div>  </body></html>

给package.json里的script添加"build":"webpack"

如当前图片:

然后执行打包程序npm run build验证是否成功

Html-Webpack-Plugin

要把打包完成的代码添加到我们的html文件,其中一个方法是手动插入一个 script 标签并指定打包后的文件的位置到src属性.一个更加好的做法是通过一个叫 html-webpack-plugin 的插件帮助我们自动完成上面的工作.这个插件提供了一个简单的方式来根据我们的html文件模板生成我们最终需要的html文件.我们只需要关心html文件模板即可,然后通过一些简单配置它就能帮我们完成script的插入.
简单来说就是能够将打包后的js文件添加入html中

首先我们要在文件中执行以下命令

npm install html-webpack-plugin

在webpack.config.js中添加设置
配置最终如下:

   var path=require('path');   var HtmlWebpackPulgin =require('html-webpack-plugin');   var CleanWebpackPulgin=require('clean-webpack-plugin');   module.exports={       entry:'./src/index.js',       output:{         path:path.resolve('dist'),         filename:'[hash].bundle.js'       },       module:{           rules:[               { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },               { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ }               ]       },       plugins:[           new CleanWebpackPulgin(['dist']),           new HtmlWebpackPulgin({               title:'first',               template:'index.html',               filename:'index.html'           })       ]   };

在原先的在webpack.config.js中继续添加设置

"start":"webpack-dev-server"

并执行npm run start

然后打开浏览器并访问 http://localhost:8080/ ,打开控制台你应该可以可以看出输出 “Hey guys and ladies!!” .使用localhost:8080是因为 webpack-dev-server 启动了一个开发服务器.注意webpack-dev-server 会在我们执行 npm run start 时运行.

接下来就是安装React依赖

npm install react react-dom --save

接下来我们就在文件夹里创建index.js 和App.js

项目结构如下图:
这里写图片描述

接下来编辑App.js

  //     src/App.jsimport React from 'react';export default class App extends React.Component {    render() {        return (            <div style={{textAlign: 'center' ,color:'red'}}>                <h1>成功运行React</h1>            </div>);    }}

然后再把页面的组件渲染到页面上

import React from 'react';import ReactDOM from 'react-dom';import App from './components/App.jsx';ReactDOM.render(<App />, document.getElementById('root'));

执行npm run start

这里写图片描述
这样就显示运行成功 ..

如果你已经做到这一步,说明你已经成功一半了 ..而另一半,就是css配置,和img图片的转译配置, 这里我就附上官网的配置,只要在原有的wepback.config.js
配置就行
加载css npm install --save-dev style-loader css-loader

 module: {    rules: [       {         test: /\.css$/,         use: [           'style-loader',           'css-loader'         ]       }     ]   }

加载图片

npm install --save-dev file-loader

  module: {      rules: [       {         test: /\.(png|svg|jpg|gif)$/,         use: [           'file-loader'         ]       }      ]    }  };

加载自定义字体

  module: {      rules: [       {         test: /\.(woff|woff2|eot|ttf|otf)$/,         use: [           'file-loader'         ]       }      ]    }  };

加载数据

可以加载的有用资源还有数据，如 JSON 文件，CSV、TSV 和 XML。

npm install --save-dev csv-loader xml-loader

  {         test: /\.(csv|tsv)$/,         use: [           'csv-loader'         ]       },       {         test: /\.xml$/,         use: [           'xml-loader'         ]       }

这样..这个React就算基本搭建完成了 ..

附上最后的webpack.config.js

const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const CleanWepackPlugin =require('clean-webpack-plugin');module.exports = {    entry: './src/index.js',    output: {        path: path.resolve('./dist'),        filename: '[hash].bundle.js'    },    devtool: 'inline-source-map',    module: {        rules: [            {                test: /\.css$/,                use: [                    'style-loader',                    'css-loader'                ]            },            {                test: /\.js$/,                loader: 'babel-loader',                exclude: /node_modules/            },            {                test: /\.jsx$/,                loader: 'babel-loader',                exclude: /node_modules/            },            {                test:/\.(png|svg|jpg|gif)$/,                use:[                    'file-loader'                ]            },            {                test: /\.(woff|woff2|eot|ttf|otf)$/,                use: [                    'file-loader'                ]            },            {                test: /\.(csv|tsv)$/,                use: [                    'csv-loader'                ]            },            {                test: /\.xml$/,                use: [                    'xml-loader'                ]            }        ],    },    plugins: [        new CleanWepackPlugin(['dist']),        new HtmlWebpackPlugin({        template: 'index.html',        filename: 'index.html',        inject: 'body'    })    ]};

如果还有什么疑问,或者执行不成功,也可以留言..

阅读全文

0 0