[英]How to package to 'production' my react website with Webpack?
I managed to use this react-hot-boilerplate configuration script to create and test a simple React Flux webapp. 我设法使用这个react-hot-boilerplate配置脚本来创建和测试一个简单的React Flux webapp。
Now that I have a website I like when I run npm start
, what would be the easiest/best way to add a production build in the configuration? 现在,当我运行
npm start
时,我有一个我喜欢的网站,在配置中添加生产版本的最简单/最好的方法是什么? When I use that 'package' command I would like to get a little prod
folder with all the final html and minified js files that I need in it, is that what I should expect? 当我使用'package'命令时,我想得到一个带有我需要的所有最终html和缩小js文件的小
prod
文件夹,这是我应该期待的吗?
This is my package.json : 这是我的package.json :
{
"name": "react-hot-boilerplate",
"version": "1.0.0",
"description": "Boilerplate for ReactJS project with hot code reloading",
"scripts": {
"start": "node server.js",
"lint": "eslint src"
},
"author": "Dan Abramov <dan.abramov@me.com> (http://github.com/gaearon)",
"license": "MIT",
"bugs": {
"url": "https://github.com/gaearon/react-hot-boilerplate/issues"
},
"homepage": "https://github.com/gaearon/react-hot-boilerplate",
"devDependencies": {
"babel-core": "^5.4.7",
"babel-eslint": "^3.1.9",
"babel-loader": "^5.1.2",
"eslint-plugin-react": "^2.3.0",
"react-hot-loader": "^1.2.7",
"webpack": "^1.9.6",
"webpack-dev-server": "^1.8.2"
},
"dependencies": {
"react": "^0.13.0",
"flux": "^2.0.2",
"events": "^1.0.2",
"object-assign": "^3.0.0",
"jquery": "^2.1.4",
"imports-loader": "^0.6.4",
"url-loader": "^0.5.6",
"numeral": "^1.5.3",
"bootstrap": "^3.3.5",
"d3": "^3.5.6",
"zeroclipboard": "^2.2.0",
"react-toastr": "^1.5.1",
"d3-legend": "^1.0.0"
}
}
I think I want to add a new script in the scripts list so I can use a new npm xyz
command but I am not sure what to write there. 我想我想在脚本列表中添加一个新脚本,这样我就可以使用新的
npm xyz
命令,但我不确定在那里写什么。
Also my Webpack.config.js , in case I might(?) have to use a similar but distinct copy for the prod config : 还有我的Webpack.config.js ,以防我可能(?)必须为prod配置使用类似但不同的副本:
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'eval',
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./src/index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" })
],
externales: { "jquery": "jQuery", "$": 'jQuery' },
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [
{
test: /\.jsx?$/,
loaders: ['react-hot', 'babel'],
include: path.join(__dirname, 'src')
},
{ test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, // use ! to chain loaders
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192'} // inline base64 URLs for <=8k images, direct URLs for the rest
]
}
};
And I'm not sure which parts to keep, alter (prod config) or add if a copy is required... 而且我不确定要保留哪些部分,改变(prod config)或添加如果需要副本......
You'll want to run your Webpack build with the --optimize-minimize
option (minifies) and make sure that NODE_ENV
is set to production
(this effectively disables/strips out React's development only code such as prop types checking) 您将希望使用
--optimize-minimize
选项(缩小)运行Webpack构建并确保将NODE_ENV
设置为production
(这有效地禁用/删除了React的仅开发代码,例如prop类型检查)
You can accomplish this as an npm command by adding a build:production
(you can name this whatever you like) command to your package.json
such as NODE_ENV=production webpack --optimize-minimize
您可以通过向
package.json
添加build:production
(您可以将此任何名称命名)命令添加到npm命令来完成此操作,例如NODE_ENV=production webpack --optimize-minimize
Add this to your package.json's scripts
将它添加到package.json的
scripts
"build:production": "NODE_ENV=production webpack --optimize-minimize"
And run the command via npm run build:production
并通过
npm run build:production
运行命令
Note: this is assuming you have already correctly configured Webpack and can "build" by running webpack
from the command line 注意:这是假设您已经正确配置了Webpack并且可以通过从命令行运行
webpack
来“构建”
You may have to look at your webpack.config I suggest getting to know Webpack outside of this boilerplate. 您可能需要查看您的webpack.config我建议在此样板之外了解Webpack。 Egghead.io has some great, short videos on the topic (and many others) :) egghead.io/search?q=Webpack and specifically https://egghead.io/lessons/javascript-intro-to-webpack
Egghead.io有一些关于这个主题的很棒的短视频(还有很多其他的):) egghead.io/search?q=Webpack,特别是https://egghead.io/lessons/javascript-intro-to-webpack
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.