webpack入门+react环境配置_ES2015(es6)

上一篇: Vue组件之全局组件与局部组件下一篇:Vue2+Echarts实现多种图表数据可...

webpack入门+react环境配置

发布时间：2019-08-19 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了webpack入门+react环境配置，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_777_2@小结放在前：这篇文章主要是为下一篇的react提前铺好路，webpack是一个前端资源模块化管理和打包工具，说白了就是方便我们管理自己的常用的一些代码，比如你开发中用到sass以及jade同时用到es6，开发时你不可能改动某个地方就挨个命令去转换在到浏览器去看效果，那样效率是非常低的。所以webpack帮我们省去了那些多余的步骤
webpack 基本安装
开始前还是万万不能缺少的安装：

      
      
      
      
      

npm install webpack -g

安装完接着是建个文件夹新建一个package.json依赖管理文件

      
      
      
      
      

npm inIT  //运行后  按提示填写   当然嫌麻烦 就直接下一步  下一步就好  无伤大碍

现在安装我们的webpack

      
      
      
      
      

npm install webpack --save-dev   
//--save-dev 的意思是将这个安装过程记录到我们的package.json依赖管理文件里

完后新建一个文件并命名为webpack.config.js（如同我们的常规的 gulpfile.js、Gruntfile.js），就是一个配置项，告诉 webpack 它需要做什么。
打开webpack.config.js引入webpack

      
      
      
      
      

VAR webpack = require('webpack');

webpack 基本入门
webpack主要结构分三个：入口文件配置（entry）、入口文件输出配置（output）、加载器配置（module）、其他配置（resolve）
入口文件配置

      
      
      
      
      

entry: {
        index : './src/main.js'
    },


入口文件输出配置

      
      
      
      
      
//配置编译成功后文件存放的位置
output: {
        path: 'dist/js',  //编译后文件所在的文件夹
        filename: '[name].js'  //根据入口文件名命名编译后的文件名，编译后文件还是叫main.js
    },

加载器配置

      
      
      
      
      

module: {
        //最关键的一块配置，它告知 webpack 每一种文件都需要使用什么加载器来处理
        loaders: [
            { test: /.css$/, loader: 'style-loader!css-loader' },
            { test: /.js$/, loader: 'jsx-loader?harmony' },
            { test: /.scss$/, loader: 'style!css!sass?sourceMap'},
            { test: /.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ]
    },

其他配置

      
      
      
      
      

resolve: {

        //自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
        extensions: ['', '.js', '.json', '.scss']
        
    }

ok！好记忆不如烂笔头，现在我们来自己搭建一个react的开发环境吧！
先参考我的目录结构

build存放编译后的文件，development存放react代码的文件夹，components存放react组件的文件夹，node_modules存放安装的依赖
我们先要安装一些项目依赖：

      
      
      
      
      

npm install --save-dev react react-dom

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

npm install --save-dev style-loader css-loader sass-loader url-loader

npm install --save-dev webpack-dev-server 
//自动刷新修改后的结果，在webpack.config.js中配置webpack-dev-server，
//在这里需要修改下entry的路径，给它加一个webpack/hot/dev-server，后文会提到

要是安装失败那就分开一个个装，还不行就用淘宝的cnpm装 ，还不行就看看你的node和npm的环境变量等配置（亲身体会T_T）

      
      
      
      
      

npm install cnpm -g

行！接下来是文件的内容
webpack.config.js文件的配置如下：

      
      
      
      
      

var path = require('path');
var webpack = require('webpack');  //加载webpack依赖包
module.exports = {
    entry: ['webpack/hot/dev-server', path.resolve(__dirname, './development/main.js')],  
    //入口文件并添加了热加载
    output: {
        path: path.resolve(__dirname, './build'),
        filename: 'bundle.js'  //输出文件
    },
    module: {
        loaders: [
            {
                test: /.js?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel',
                query: {
                    presets: ['es2015', 'react']
                } //将react编译成js文件
            },
            { test: /.css$/, loader: 'style-loader!css-loader' }, 
            //打包css文件
            { test: /.scss$/, loader: 'style!css!sass?sourceMap'}, 
            //编译sass文件
            { test: /.(png|jpg)$/, loader: 'url-loader?limit=8192'} 
            //对图片进行打包
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
    resolve: {
        //自动扩展文件后缀名
        extensions: ['', '.js', '.json', '.scss', '.ts']
    }
};

main.js内容如下：

      
      
      PE="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="
let React = require('react');
let ReactDOM = require('react-dom');
let AppComponent = require('./components/index.js');
ReactDOM.render(, document.getElementById('content'));
" title="" data-original-title="复制">
      
      

let React = require('react');
let ReactDOM = require('react-dom');
let AppComponent = require('./components/index.js');
ReactDOM.render(<AppComponent />, document.getElementById('content'));

index.js内容如下：

      
      
      button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="
var React = require('react');
var ProductBox;
ProductBox = React.createClass({
    render: function () {
        return (
            
                hello react&amp;es2015&webpack!!!
            
        );
    }
});

module.exports = ProductBox;
" title="" data-original-title="复制">
      
      
@H_360_438@
var React = require('react');
var ProductBox;
ProductBox = React.createClass({
    render: function () {
        return (
            <div classname="productBox">
                hello react&es2015&webpack!!!
            </div>
        );
    }
});

module.exports = ProductBox;

index.htML内容如下：

      
      
      
      
      

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>React Project</title>
</head>
<body>
<script src="http://localhost:8080/webpack-dev-server.js"></script>
<div id="content"></div>
<script src="./bundle.js"></script>
</body>
</html>

将上面的文件写好后并放到对应文件夹内运行命令npm run build dev，成功后浏览器访问地址location:8080，就会显示出对应界面
结果：
hello react&es2015&webpack!!!
晚上写可能有很多内容漏了没解释详细，欢迎纠正！！！

脚本宝典总结

以上是脚本宝典为你收集整理的webpack入门+react环境配置全部内容，希望文章能够帮你解决webpack入门+react环境配置所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：all all babel button button char char Class div do document DOM es6 export export export function function function in in int java let location location Map Map name name new new node package package plugin plugin post-format-gallery React reset reset return return return select static static static text text top top try undefined undefined var

上一篇: Vue组件之全局组件与局部组件下一篇:Vue2+Echarts实现多种图表数据可...

猜你在找的ES2015(es6)相关文章

vuex 基本入门和使用（二） 2019-08-19
默认参数如何在JavaScript ES6中工作 2018-11-14
JavaScript ES6功能：好的部件 2018-11-14
如何使用ES6箭头函数使您的JavaScript更易于阅读 2018-11-14
如何使用ES6在JavaScript中有条件地构建对象 2018-11-14
关于如何使用Fetch API执行HTTP请求的实用ES6指南示例代码 2018-11-14
5个在ES6中修复的JavaScript“坏”的部分 2018-11-13
分享干货ECMAScript 2015（ES6）提示和技巧非常有用 2018-11-13
JavaScript ES6 - 写得少，做得更多 write less, do more 2018-11-13
什么时候（和为什么）你应该使用ES6箭头功能 - 何时不应该使用ES6箭头功能 2018-11-12

全站导航更多

最新ES2015(es6)教程

热门ES2015(es6)教程