webpack+react+ES6 配置安装

最新推荐文章于 2024-05-07 10:53:36 发布

置顶郎楠

最新推荐文章于 2024-05-07 10:53:36 发布

阅读量2.9k

点赞数 1

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/ln471399281/article/details/74626488

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

如今webpack已经发布3.0.0版本。近期没事学习webpack react es6 玩玩 在此记录一下学习的过程以及遇到的一些坑，方便日后用的时候直接拿来用、不多介绍 直奔主题。
一、webpack的安装与配置：
   1>使用webpack，首先全局安装node（http://nodejs.cn/）官网下载稳定版4.xx或者6.xx 或者最新版8.xx 之后可在cmd中 键入node -v命令 查看安装版本 以及node自带的npm包管理器。
   2>其次在node的基础上 全局安装webpack cmd键入命令
   ` npm install webpack -g `                       
   （ 默认安装的是webpack最新版本3.0.0 由于新版本有些改变，会有些不稳定，采用的是1.14.0版本的webpack 指定安装版本） 
    `npm install webpack@1.14.0 -g`
   3>新建项目文件 demo目录结构如下：

(https://img-blog.csdn.net/20170707132411950?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbG40NzEzOTkyODE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast))
如上图所示，是webpack的基本目录结构，紧接着在项目文件下打开git或者cmd安装webpack到本地项目中，存储在项目生产的node_modules中。
npm install webpack@1.14.0 --save-dev
4>初始化项目 npm init 自动生成package.json 一路enter回车知道出现提问就ok 。

   {
  "name": "web1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "jquery": "^3.2.1",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.5",
    "webpack-hot-middleware": "^2.18.1"
  },
  "dependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.0.15",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.25.0",
    "es6-promise": "^4.0.5",
    "exports-loader": "^0.6.4",
    "express": "^4.15.3",
    "extract-text-webpack-plugin": "^1.0.1",
    "jsx-loader": "^0.13.2",
    "less-loader": "^6.0.6",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-hot-loader": "^1.3.1",
    "react-router": "^3.0.0",
    "style-loader": "^0.18.2"
  }
}

   5>webpack.config.js文件是webpack必备的配置文件 如同gulp中的gulpfile.js文件 。
         以本demo最基本的配置为例子，首先需要引入本地的webpack，通过cmd规范引入 基本配置如下：

     var webpack = require('webpack');//引入webpack
     var ET = require('extract-text-webpack-plugin');//css合并抽离 插件
     module.exports = {
           // 入口
			    entry: [
			        "./src/index.js"
			    ],
		    // 出口
		    output: {
		        path: __dirname + '/app',
		        filename: 'bundle.js'
		    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel'
            },
            {
                test: /\.css$/,
                loader: ET.extract('style','css')
            },
            {
                test: /\.less$/,
                loader: ET.extract('style', 'css!less')
            },

            {
                test: /\.jsx$/,
                exclude: /node_modules/,
                loader: 'babel'
            }
        ]
    },

plugins: [
    // new webpack.optimize.UglifyJsPlugin(),//js压缩
    new ET('bundle.css', { //样式单独合并
        allChunks: true
    }),
    new webpack.HotModuleReplacementPlugin(),//代码热替换
    new webpack.NoErrorsPlugin()//允许错误不打断程序
]

};
配置中的一些依赖都需要安装如 extract-text-webpack-plugin、loader css-loader style-loader 、编译base6（babel-core）等等根据业务需求安装此类依赖两种方式全部写在package.json中一键npm install 或者是依次安装如npm-install loader 等等
6>基本配置完成后可以写组件代码本demo中入口文件为index.js文件业务组件是sub.js
入口文件引入（import/require）业务组件组件暴露接口对象 app文件中手动（或者通过插件自动）新建页面，页面引入出口文件如下

 index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

</head>
<body>
     <!--<div id="div1"></div>-->
     <div id="app"></div>
</body>
<script src="bundle.js"></script>
</html>

入口文件：

/**
 * Created by Administrator on 2017/7/5.
 */

/*document.write(require('./sub.js')) ;*/

import React from 'react';
import ReactDOM from 'react-dom';
import App from './sub';

ReactDOM.render(<App />, document.getElementById('app'));

if (module.hot) {
    module.hot.accept();
}

业务组件文件：

/**
 * Created by Administrator on 2017/7/6.
 */

module.exports = me;*/

import React from 'react';

class App extends React.Component {

    render() {
        return <div>我们的世界 但是  而且我们的问题很难实现了</div>
    }
}

export default App

出口文件：bundle.js 打包后在页面引入建议在body后引入避免获取不到相应的dom元素

二、以上基本webpack的配置情况下面主要是记录react+es6
利用webpack结合更完美模块化开发
1>首先需要安装react 以及react-dom 以及编译jsx语法的转译babel等

    npm install react react-dom
    安装 "jsx-loader": "^0.13.2",
        "es6-promise": "^4.0.5",
        "babel-preset-es2015": "^6.0.15",
        "babel-preset-react": "^6.24.1",

2>新建.babelrc文件预编译解析

    {
   "presets": [ "es2015","react"  ]
}

3>在配置文件中配置相应的模块编译功能以及热更新（利用express中间件）
module: {
loaders: [
{
test: /.js $KaTeX parse error: Expected 'EOF', got '}' at position 89: \dotsl' }̲, {\dots$ /,
loader: ET.extract(‘style’,‘css’)
},
{
test: /.less$/,
loader: ET.extract(‘style’, ‘css!less’)
},

        {
            test: /\.jsx$/,
            exclude: /node_modules/,
            loader: 'babel'
        }
    ]

},

4>es6中通过import引入依赖 注意依赖顺序 react具体语法编写后续再说

三、开发环境中要启动一个本地服务器新建一个server.js文件
1>server.js文件：

    var express = require('express');
var app = express();
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config.js');
var webpackCompiled = webpack(config);

var webpackHotMiddleware = require('webpack-hot-middleware');
app.use(webpackHotMiddleware(webpackCompiled))
new WebpackDevServer(webpack(config), {
  contentBase: __dirname + '/app',
  hot: true,
  inline: true

})
.listen(80, 'localhost', function(err, result){
  if (err) {
    console.log(err);
  }
  console.log('Listening at localhost:80');
});

2>安装本地服务依赖（模拟开发环境）

    npm install webpack-dev-server --save-dev

在配置文件中引入 入口文件中添加

3>配置热更新与浏览器同步无需刷新浏览器
安装node中ecpress 并引入server.js配置文件

var express = require('express');
var app = express();
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config.js');
var webpackCompiled = webpack(config);

var webpackHotMiddleware = require('webpack-hot-middleware');
app.use(webpackHotMiddleware(webpackCompiled))

同时在配置文件 webpack.config.js中引入热更新插件

执行webpack命令执行编译执行npm start 开启服务

四、最后简单总结一下本文只是自己的学习记录写的比较粗糙后续后不断改进，陆续的会上传到github 同时欢迎前辈指点纠正错误；如有不同的看法留言或者联系邮箱li_ning021466@163.com

还有太多比较深的东西还没有写 1、模块化与非模块化 2、base编译 3、plugin插件选项 4、多入口文件打包等等希望能够不断提升

郎楠

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
webpack+react+ES6 配置安装

如今webpack已经发布3.0.0版本。近期没事学习webpack react es6 玩玩在此记录一下学习的过程以及遇到的一些坑，方便日后用的时候直接拿来用、不多介绍直奔主题。一、webpack的安装与配置： 1&gt;使用webpack，首先全局安装node（http://nodejs.cn/）官网下载稳定版4.xx或者6.xx 或者最新版8.xx 之后可在cmd中键入node -v命
复制链接

扫一扫