利用yarn实现一个webpack+react种子

前端之家收集整理的这篇文章主要介绍了利用yarn实现一个webpack+react种子前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一、初始化项目

首先确保你的node 版本 >=4.0.并且确保yarn可以正常工作,关于安装yarn,

我们先创建个空文件夹 比如yarn-react-webpack-seed,然后输入命令:

yarn 如果没有安装,全程用 npm代替也没问题。

项目会初始化 package.json,然后填写一些基本信息即可。

接下来我们开始安装依赖项,再 package.json 添加下面内容

运行命令:

你也可以自行添加依赖,输入yarn add xxx即可。

项目创建好后,我们接下来创建一些必要的文件和目录;

二、webpack

webpack (更多)是一款模块处理器,他会将你所有的代码打包成静态文件,放到你的开发的App中。

打开webpack.config.js,然后添加下面的代码:

module.exports = {
entry: [
"webpack-dev-server/client?http://localhost:9000",'webpack/hot/only-dev-server',"./src/index"
],output: {
path: __dirname + '/build',filename: "bundle.js",publicPath: '/build/',},module: {
loaders: [
{
test: /.js?$/,loaders: ["react-hot-loader/webpack",'babel-loader?presets[]=react,presets[]=es2015'],exclude: /node_modules/
},{
test: /.less$/,loader: "style!css!less"
}
]
},plugins: [
new webpack.NoErrorsPlugin(),new webpack.HotModuleReplacementPlugin()
]
};

这份文件大概有四个配置项entry,output,module,plugins.

entry:指定打包的入口文件,每有一个键值对,就是一个入口文件

output:配置打包结果,path定义了输出文件夹,filename则定义了打包结果文件名称,filename里面的[name]会由entry中的键替换,例子中的/build/bundle.js便是生成文件

module:定义了对模块的处理逻辑,这里可以用loaders定义了一系列的加载器,以及一些正则。当需要加载的文件匹配test的正则时,就会进行处理。这里我们使用了react-hot 和 babel。babel-loader是我们使用ES-6进行开发时用于生成JS文件

loader文件进行处理,这正是webpack强大的原因。比如这里定义了凡是.js结尾的文件都是用babel-loader做处理,而.jsx结尾的文件会先经过jsx-loader处理,然后经过babel-loader处理。yarn add添加这些插件。babel中的preset配置你也可以.babelr文件中定义:

plugins: 这里定义了需要使用的插件,比如commonsPlugin在打包多个入口文件时会提取出公用的部分,生成common.js。

这个时候我们再package.json中加入script 字段,

这个时候我们输入一个yarn start命令时候我们会启动一个webpack server这个时候你可以访问 http://localhost:9000/ 看到我们的页面了; 如果你使用yarn run build时候可以将文件自动生成到bulid/下。

接下来我们新建index.html文件

<Meta charset="UTF-8"> React+React-Router+Webpack+Yarn Seed <Meta http-equiv="X-UA-Compatible" content="IE=edge"> <Meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

猜你在找的JavaScript相关文章