教你webpack、react和node.js环境配置(上篇)

原创 黎云锐 教程 前端 63阅读 16 天前 举报

很多人刚学习react的时候,往往因为繁琐的配置而头疼,这里我将手把手教大家怎么用webpack配置react和redux的环境,这篇教程包括前端react和后台node整个网站的环境配置,对node没兴趣的可以只看这篇。

我把所有代码都放到了github上面供参考:webpack-react-express环境配置

1. 什么是webpack?

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

2. 创建项目

先创建项目文件夹,我这里命名为blog,当成一个博客项目,当然你也可以命名成其他的。

接着用npm初始化这个项目。(使用npm之前需要先安装node.js和npm)

image

这些内容可以enter键全部跳过,结束后目录里面会出现一个package.json文件,这个文件里面是我们项目的信息。

image

之后我们再创建两个文件夹,分别放前端和后台的代码,这两部分我会分开讲。

3. client

由于我们使用的是es2015和react这些语法,所以需要用babel来编译,命令行进入到client目录,并且创建两个目录分别存放编译前的代码和编译后的代码。

我们会把js和css单独打包出来,所以在dist目录下面创建js和css目录以及index.html入口文件,同时在src目录下面创建几个目录(之后的创建命令行就省略了,你也可以直接右键创建文件夹)。

这是最新的项目结构:

这时候安装一下项目依赖的框架和库。

这里是index.html里面的内容:
image

webpack

安装

如果npm速度太慢,建议使用淘宝的cnpm,g和save的区别建议去了解一下。

配置文件

现在我们在blog目录创建一个webpack.config.js文件。(webpack使用commonJS的语法)

babel

Babel 是一个 JavaScript 编译器,可以将es6、jsx等编译为浏览器可以识别的语法。

安装babel以及相关插件

使用webpack loader加载器

继续修改webpack.config.js里面的内容,给config对象加一个module属性。

test一般是一段正则,用来匹配对应类型的文件。
exclude是应该被忽略的文件,这里指定了node_modules。
query则有两种写法,一种是我们上面写的那种,另一种是放到loader后,比如:
loader: 'babel-loader?presets[]=es2015&&presets[]=react&&presets[]=state-1'

不过相比这两种方式,我更建议将这些放到一个.babelrc文件里面。
在blog目录下面创建一个.babelrc文件,内容如下:

我们接着完善webpack.config.js,在config对象里面添加一个plugins属性,这个是用来配置插件的。

到这里,我们的webpack环境算是全部配置完了,我们可以在main.js里面写一段代码进行测试。

然后在命令行里面输入webpack,出现下面这些就是成功了,这时dist/js下面会出现index.js和vendor.bundle.js两个文件。

image

接着我们赶紧打开index.html文件来看看效果。(千万不要忘了在index.html里面引入index.js和vendor.bundle.js)

image

事实证明了前端水实在太深了,只是写一个hello world都要配置这么多东西,安装这么多框架和库,希望大家不要放弃,继续爱前端。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复