Webpack简易入门教程

github地址 https://github.com/Skura23/simple-webpack-test/tree/master

项目结构

--your project

  |--prod

    |--components

      |--first.js

    |--index.js

  |--build

    |--index.html

    |--bundle.js

用npm安装依赖

npm init ，填写信息默认即可

npm install react --save-dev 安装react

npm install react-dom --save-dev （或者 npm i react-dom）安装react-dom

npm install webpack --save-dev 安装webpack

npm install babel-loader --save-dev 安装babelReact

npm install jsx-loader --save-dev 安装jsx-loader将JSX语法转为js语句

创建webpack.config.js

var path=require('path');

module.exports={

    entry:path.resolve(__dirname,'./prod/index.js'),

    output:{

        path:path.resolve(__dirname,'./build'),

        filename:'bundle.js',

    },

    module: {

    loaders: [{

     test: /\.js$/,

     loader: 'babel!jsx',

     exclude: /node_modules/ ,

     presets: ['es2015', 'react']

     }]

  }

}

entry：指入口文件的配置项

output：配置打包结果，path定义了输出的文件夹，filename则定义了打包结果文件的名称

module：定义了对模块的处理逻辑，这里可以用loaders定义了一系列的加载器，以及一些正则。当需要加载的文件匹配test的正则时，就会调用后面的loader对文件进行处理，这正是webpack强大的原因。

接着配置index.js

var React = require('react');
var ReactDOM = require('react-dom');
var AppComponent = require('./components/first.js');
ReactDOM.render(<AppComponent />, document.getElementById('content'));

再配置first.js（这个是自定义组件）

var React = require('react');
var ReactDOM = require('react-dom');

var FirstComp = React.createClass({

  render: function () {

    return (

      <div className="firstComp">

        Hello World!

      </div>

    );

  }

});

module.exports = FirstComp;

修改index.html以引入bundle.js，

bundle.js的生成位置在前面已经配置过了，所以我们只要在index.html里引入就可以了

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title>React Test</title>

</head>

<body>

  <div id="content"></div>

  <script src="bundle.js"></script>

</body>

</html>

配置package.json

打开package.json，并找到scripts代码块

修改scripts为

"scripts": { "build": "webpack" }

并且执行：

npm run build

现在打开index.html，可以看见Hello world，说明我们使用webpack打包成功。

其实教程至此就完了，但后面你会发现每次更新文件后都要使用npm run build重新打包，费时费力，

接下来我们使用webpack-dev-server将项目运行在虚拟服务器上，我们可以在package.json文件内定义scripts，同时修改webpack的配置文件来达到文件修改能被监听，并自动刷新浏览器的效果！

配置webpack-dev-server

修改package.json为

"scripts": {

    "build": "webpack",

    "dev": "webpack-dev-server --hot --inline --devtool eval --progress --colors --content-base build"

  },

webpack-dev-server: 在 localhost:8080 建立一个 Web 服务器

--devtool eval:为你的代码创建源地址。

--progress: 显示合并代码进度

--colors: 在命令行中显示颜色

--content-base build:指向设置的输出目录

并且在index.html里加入：

<script src="http://localhost:8080/webpack-dev-server.js"></script>

修改webpack.config.js :

var path = require('path');

module.exports = {

  entry: ['webpack/hot/dev-server', path.resolve(__dirname, './prod/index.js')],

  output: {

    path: path.resolve(__dirname, './build'),

    filename: 'bundle.js',

  }

};

npm run dev

，打开http://localhost:8080，修改文件后保存，浏览器可自动刷新内容

github地址 https://github.com/Skura23/simple-webpack-test/tree/master