node.js学习之webpack打包react最简单用法

发布时间：2020-04-09 09:05:31 作者：lixiaoyu1223
来源：网络阅读：6822

研究一天多也没弄出来个毛，今天早上来到随便一试，嘿，结果成了。最简洁最简单的使用方法，记录下来。

首先，安装webpack命令：

$ npm install webpack -g

全局安装，可以在cmd中使用webpack命令。

然后创建一个项目，项目名称webpack,我这里用的是webstorm11.创建成功之后cmd进入项目根目录，执行命令：

$ npm init

这个命令会创建一个package.json的文件，是整个项目的配置文件，添加上webpack的依赖包：

"devDependencies": {
  "jsx-loader": "^0.12.2",
  "css-loader": "^0.15.0",
  "style-loader": "^0.12.4",
  "react-hot-loader": "^1.1.1",
  "webpack": "^1.5.1",
  "webpack-dev-server": "1.6.4"
},

这些包中的各种loader 是对不同文件格式进行打包的支持。

然后安装这些包：

$ npm install

安装完成之后我们先新建一些文件，

根目录下建一个src文件夹，

src文件夹中建一个项目入口文件，我这里建的是index.js.

index.js:

const React = require('react');
const ReactDom = require('react-dom');
const View = require('./content');

ReactDom.render(<View/>,document.body);

在跟index.js同目录下，我建了一个content.js用来写react组件。

content.js:

const React = require('react');

class View extends React.Component{
  render(){
    return <p>看看有没有内容</p>
  }
}

module.exports = View;

然后在根目录下新建一个webpack.config.js，这个文件是对webpack的配置。

内容如下：

var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
module.exports = {
  //插件项
  plugins: [commonsPlugin],
  //页面入口文件配置
  entry: {
    index : './src/index.js'
  },
  //入口文件输出配置
  output: {
    path: './lib/',
    filename: '[name].js'
  },
  module: {
    //加载器配置
    loaders: [
      { test: /\.js$/, loader: 'jsx-loader?harmony' }
    ]
  },
  //其它解决方案配置
  resolve: {
    root: 'D:/workproject/webpack/src', //绝对路径
    extensions: ['', '.js', '.json', '.scss'],
    alias: {
      AppStore : 'js/stores/AppStores.js',
      ActionType : 'js/actions/ActionType.js',
      AppAction : 'js/actions/AppAction.js'
    }
  }
};

各个节点的作用都写了注释，插件项我还没弄明白是什么意思，页面入口文件配置就是项目的入口文件，入口文件输出配置是对打包之后的文件的保存位置，我这里配置到了根目录/lib/文件夹下，如果当前没有这个文件夹，打包的时候会自动新建。

加载器配置是对要打包的不同文件格式使用不同的加载器去打包，这一块是很重要的，

写完这个配置文件之后就可以执行命令打包了：

$ webpack

执行这个命令时会自动读取webpack.config.js按照配置进行打包。

如果是执行这个命令后面不带参数的话必须每修改一次文件就要重新手动执行一下这个命令，这样很麻烦，我们可以在命令后加一个参数 -w

$ webpack -w

这样在我们每次修改完文件内容并保存的时候会自动编译，就不用每次再手动执行一次了。

打包完之后我们会发现在项目根目录下多出了一个lib文件夹，文件夹里有个index.js，那是配置中的入口文件输出配置中写好的

//入口文件输出配置
  output: {
    path: './lib/',
    filename: '[name].js'
  },

path 是输出路径，filename 是输出名字，[name] 是原名输出，也可以指定名字，如果指定一个固定的名字，可以

filename: 'build.js'

这样直接写，如果有多个入口文件，可以

filename: '[name].build.js'

到时候输出的文件名就是index.build.js.我这个项目里输出的还是原来的名字：index.js

打包好之后，我们在根目录下新建一个index.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript" src="lib/common.js" charset="utf-8"></script>
<script type="text/javascript" src="lib/index.js" charset="utf-8"></script>
</body>
</html>

把两个文件都引入进去。common.js 我还没弄明白是什么。 lib/index.js 就是我们用webpack打包过的文件，是自动生成的。

然后就可以直接双击index.html在浏览器中查看结果。

本文参考http://www.jianshu.com/p/b95bbcfc590d 更多内容稍后补充。

node.js学习之webpack打包react最简单用法

相关阅读