配置webpack:引用书籍《React Speed Coding》，详细介绍了web pack的搭建过程。
Redux学习：引用书籍《redux-in-chines》,详细讲解了redux的使用
学习总结：webpack配置依赖node.js环境。在配置之前，需要安装node.js。node.js安装在本次不做讲解。步骤如下：
1.node下指令：‘npm init’ 依次填写配置信息 或者 ‘npm init --yes’ 生成默认配置信息。
2.安装React and React DOM:
npm install --save react
npm install --save react-dom
3.安装webpack
npm install --save-dev webpack
npm install --save-dev webpack-dev-server
npm install --save-dev copy-webpack-plugin
4.安装HTML generation--用于build生成index.html
npm install --save-dev html-webpack-plugin
5.安装loaders---文件加载器
npm install --save-dev css-loader
npm install --save-dev style-loader
npm install --save-dev son-loader
6.配置PostCSS and Normalize CSS
npm install --save-dev postcss-loader
npm install --save-dev precss
npm install --save-dev autoprefixer
npm install --save-dev normalize.css
npm install --save-dev postcss-easy-import
7.安装Babel
npm install --save-dev babel-core
npm install --save-dev babel-loader
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-react
npm install --save-dev babel-preset-react-hare
8.Configure Babel .babelrc
{
"presets": ["react", "es2015"],
"env":{
"development":{
"presets": ["react-hmre"]
}
},
"plugins": ["transform-class-properties"]
}
9.Configure Webpack in webpack.config.js
// Initialization
const webpack = require('webpack');
// File ops
const HtmlWebpackPlugin = require('html-webpack-plugin');
// Folder ops
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
// PostCSS support
const postcssImport = require('postcss-easy-import');
const precss = require('precss');
const autoprefixer = require('autoprefixer');
// Constants
const APP = path.join(__dirname, 'app');
const BUILD = path.join(__dirname, 'build');
const STYLE = path.join(__dirname, 'app/style.css');
const PUBLIC = path.join(__dirname, 'app/public');
const TEMPLATE = path.join(__dirname, 'app/templates/index.html');
const NODE_MODULES = path.join(__dirname, 'node_modules');
const HOST = process.env.HOST || 'localhost';
const PORT = process.env.PORT || 8080;
module.exports = {
entry: {
app: APP,
style: STYLE
},
output: {
path: BUILD,
filename: '[name].js',
},
resolve: {
extensions: ['', '.js', '.jsx', '.css']
},
module: {
loaders: [{
test: /\.jsx?$/,
loaders: ['babel?cacheDirectory'],
include: APP
}, {
test: /\.css$/,
loaders: ['style', 'css', 'postcss'],
include: [APP, NODE_MODULES]
}, {
test: /\.json$/,
loaders: 'json',
include: [APP, NODE_MODULES]
}]
},
postcss: function processPostcss(webpack) {
return [
postcssImport({
addDependencyTo: webpack
}),
precss,
autoprefixer({
browsers: ['last 2 versions']
})
];
},
devtool: 'eval-source-map',
devServer: {
historyApiFallback: true,
hot: true,
progress: true,
stats: 'errors-only',
host: HOST,
port: PORT,
outputPath: BUILD
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('development')
}
}),
new webpack.HotModuleReplacementPlugin(),
new CopyWebpackPlugin(
[{
from: PUBLIC,
to: BUILD
}], {
ignore: ['.DS_Store']
}
),
new HtmlWebpackPlugin({
template: TEMPLATE,
inject: 'body'
})
]
};
10.在 package.json配置启动服务
"scripts":{"start":"NODE_ENV=development webpack-dev-server --inline","build":"NODE_ENV=production webpack --config webpack.prod.config.js"},
11.开启服务
npm install -g serve
npm run build
serve build
以上都完成可以直接npm start 开启。
网友评论