webpack+react 构建流程 确保已安装最新稳定版node.js
- 设置淘宝npm镜像,通过cnpm代替npm命令快速下载
$npm install -g cnpm --registry=https://registry.npm.taobao.org
- 新建项目目录,在目录下执行
$cnpm init
- 安装webpack 和调试工具
$cnpm install webpack --save -g
//测试服务器插件
$cnpm install webpack-dev-server --save-dev
$cnpm install react-hot-loader --save-dev
- 安装loader组件
$cnpm install babel-loader babel-core
//es6兼容
babel-preset-es2015 --save-dev
//load css
$cnpm install css-loader style-loader --save-dev
//load file
$cnpm install file-loader --save-dev
$cnpm install url-loader --save-dev
$cnpm install expose-loader --save
- 安装webpack插件
//可使css分离 加载插件
$cnpm install extract-text-webpack-plugin --save-dev
//文件移动插件
$cnpm install transfer-webpack-plugin --save-dev
//html生成插件
$cnpm install html-webpack-plugin --save-dev
- 安装react
//react 安装
$cnpm install react react-dom --save
//es6转码器插件
$cnpm install babel-preset-react --save
- 安装jquery
$cnpm install jquery --save
- 文档目录结构
--app
--dist
data.json
index.html
--src
index.css
index.js
list.js
webpack.config.dev.js
- webpack.config.dev.js配置文件如下
const webpack = require('webpack');
const path = require('path');
const ROOT_PATH = path.resolve(__dirname);
const MODULES_PATH = path.join(ROOT_PATH, './node_modules'); // node包目录
const BUILD_PATH = path.join(ROOT_PATH, './app/dist/assets'); // 最后打包目录
//分离CSS插件
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: {
index: './app/src/index.js',
common: ["react","react-dom","jquery"]
},
output: {
path: BUILD_PATH, // 设置输出目录
filename: '[name].bundle.js', // 输出文件名
},
resolve: {
modulesDirectories: ['node_modules', path.join(__dirname, 'node_modules')],
extensions: ['','.web.js', '.js', '.jsx', '.json']//配置解析文件后缀
},
module: {
loaders: [
// css
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
},
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: ['babel-loader'],
query: {
presets: ['react', 'es2015']
}
},
// image & font
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
loader: 'url-loader?limit=8192&name=[name].[ext]'
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loader: 'url-loader?limit=8192&name=[name].[ext]'
},
// expose-loader将jquery变量从依赖包中暴露出来
{
test: require.resolve("jquery"),
loader: "expose?$!expose?jQuery"
}
]
},
plugins: [
// 插件
new ExtractTextPlugin('[name].bundle.css', {
allChunks: true
}),
new webpack.HotModuleReplacementPlugin(),//热加载
// 把jquery作为全局变量插入到所有的代码中
// 然后就可以直接在页面中使用jQuery了
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}),
// public sources
new webpack.optimize.CommonsChunkPlugin({
// 与 entry 对应
name: 'common',
// 输出的公共资源名称
filename: 'common.bundle.js',
// 对所有entry实行这个规则
minChunks: Infinity
}),
new webpack.NoErrorsPlugin()
],
//使用webpack-dev-server,提高开发效率
devServer: {
contentBase: './app/dist',
host: '0.0.0.0',
port: 3200,
inline: true,
hot: true,
}
};
示例下载:webpack+react 脚手架
- 快速构建:在本测试项目目录下
$cnpm install
$cnpm start