webpack搭建项目

1.初始化项目安装webpack相关工具

// 按指示初始化 NPM 设定 package.json
$ npm init
 // --save-dev 是可以让你將安装套件的名称和版本咨询存放到 package.json，方便日后使用
$ npm install --save-dev babel-core babel-eslint babel-loader babel-preset-es2015 babel-preset-react html-webpack-plugin webpack webpack-dev-server

2.在根目录设置webpack.config.js

//使用 HtmlWebpackPlugin，將 bundle 好的<script>插入到 body。${__dirname} 为 ES6 语法对应到 __dirname

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
     template: `${__dirname}/app/index.html`,
     filename: 'index.html',
     inject: 'body',
 });
 module.exports = {
 // 应用开启后从 entry 进入，唯一入口文件
 entry: [
     './app/index.js',
 ],
 // output 导出文件名 以及 路径
 output: {
     path: `${__dirname}/dist`,
     filename: 'index_bundle.js',
 },
 module: {
//通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理
     loaders: [
         { 
             test: /\.js$/, 
             exclude: /node_modules/,
             loader: 'babel-loader', 
             query: { presets: ['es2015', 'react'],  },
        },
    ],
}, 

 // devServer 則是 webpack-dev-server 設定
 devServer: {
     inline: true, //实时刷新
     port: 8008,
 },
 // plugins 放置所使用的插件
 plugins: [HTMLWebpackPluginConfig],
};

3.app下创建index.js

import React from 'react';
import ReactDOM from 'react-dom';
 class App extends React.Component {
     constructor(props) {
        super(props);
        this.state = { };
     }
     render() {
         return (
            <h1>Hello World</h1>);
     }
 } ReactDOM.render(<App/>, document.getElementById('app'));

4.package.json下加启动配置

"scripts": {
     "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"
}

5.启动

npm run dev