1.初始化webpack
npm install webpack -g (全局安装)
npm init (初始化packge.json)
npm install webpack --save-dev (安装到局部)(如果报错就用cnpm)
webpack entry.js(入口文件) bundle.js
2.
然后创建一个配置文件 webpack.config.js
:
var webpack = require('webpack')
module.exports = {
entry: './entry.js',(入口文件)
output: {
path: __dirname,(导出路径)
filename: 'bundle.js'(导出文件)
},
module: {
loaders: [
{test: /.js$/,exclude: /node_modules/,loader: 'react-hot!babel'}
{test: /.css$/, loader: 'style!css'}(配置loaders)
] } }
同时简化 entry.js
中的 style.css
加载方式:
require('./style.css')
最后运行 webpack
,可以看到 webpack 通过配置文件执行的结果和上一章节通过命令行 webpack entry.js bundle.js --module-bind 'css=style!css'
执行的结果是一样的。
3.webpack搭建react开发环境
npm install babel-core babel-preset-es2015 babel-preset-react webpack webpack-dev-server babel-loader react-hot-loader --save-dev
npm install react react-dom --save