webpack配置

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

原文地址:https://www.cnblogs.com/SunShineKG/p/6171857.html