如何创建一个react项目
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
关于webpack的一些基本命令和配置
- 首先我们需要初始化项目,
npm init
生成package.json
文件 - 利用webpack构建工具,安装相应插件,运行
npm install webpack webpack-dev-server --save-dev
- 我们使用react,所以需要安装相应插件,
npm i react reacr-dom --save
--save
和--save-dev
一个是在项目开发时需要的,一个是项目打包上线之后依然需要用到的,他们会放到不同依赖的里面devDependencies
开发环境才需要用到的依赖,项目打包上线之后不需要
dependencies
项目上线之后依旧需要使用的依赖
webpack.config.js
就是一个普通的js文件,遵从commonJS规则,最后输出一个对象,即module.export = { ... }
var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');
输入/输出
一般新建./app/index.jsx
作为入口文件
entry: path.resolve(__dirname, 'app/index.jsx'),
输出就是bundle.js
,js和css都在里面,不过只有在开发环境中才会用到,发布代码的时候,肯定不会只有一个文件
output: {
filename: "bundle.js"
},
resolve: 自动补偿后缀名
resolve:{
extensions:['', '.js','.jsx']
},
module
针对不同类型的文件,使用不同的loader(加载器),当然使用之前需要安装
module: {
loaders: [
{ test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel' },
{ test: /\.less$/, exclude: /node_modules/, loader: 'style!css!postcss!less' },
{ test: /\.css$/, exclude: /node_modules/, loader: 'style!css!postcss' },
{ test:/\.(png|gif|jpg|jpeg|bmp)$/i, loader:'url-loader?limit=5000' }, // 限制大小5kb
{ test:/\.(png|woff|woff2|svg|ttf|eot)($|\?)/i, loader:'url-loader?limit=5000'} // 限制大小小于5k
]
},
postcss: [
require('autoprefixer') //调用autoprefixer插件,例如 display: flex
],
plugins插件
一般会用到一些插件
plugins: [
// html 模板插件
new HtmlWebpackPlugin({
template: __dirname + '/app/index.tmpl.html'
}),
// 热加载插件
new webpack.HotModuleReplacementPlugin(),
// 打开浏览器
new OpenBrowserPlugin({
url: 'http://localhost:8080'
}),
// 可在业务 js 代码中使用 __DEV__ 判断是否是dev模式(dev模式下可以提示错误、测试报告等, production模式不提示)
new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse((process.env.NODE_ENV == 'dev') || 'false'))
})
],
devServer
devServer: {
colors: true, //终端中输出结果为彩色
historyApiFallback: true, //不跳转,在开发单页应用时非常有用,它依赖于HTML5 history API,如果设置为true,所有的跳转将指向index.html
inline: true, //实时刷新
hot: true // 使用热加载插件 HotModuleReplacementPlugin
}
npm start
"scripts": {
"start": "NODE_ENV=dev webpack-dev-server --progress --colors",
"build": "rm -rf ./build && NODE_ENV=production webpack --config ./webpack.production.config.js --progress --colors"
},
其中,只有npm start 和 npm test可以省略run
执行npm start中的设置通过 new webpack.DefinePlugin
来判断
webpack.production.config.js
开发环境下,可以不用考虑系统性能,更多的考虑如何增加开发效率,而发布之后需要考虑这方面,包括加载速度,缓存等等
发布到./build
文件夹中
path: __dirname + "/build",
vendor
将第三方依赖单独打包,即将node_module文件夹的代码打包为vendor.js将我们自己写的业务打包为app.js,这样有助于缓存,因为在项目维护过程中,第三方依赖不经常变化,而业务代码会经常变化
// 将 第三方依赖(node_modules中的) 单独打包
vendor: Object.keys(pkg.dependencies)
md5后缀
为每个打包出来的文件都加md5后缀,可使文件强缓存
filename: "/js/[name].[chunkhash:8].js"
分目录
打包出来的不同类型的文件,放在不同目录下,例如图片,样式等