webpack基本安装和配置

本文介绍Webpack辅助ReactJS进行开发的简单例子。

Webpack基础详解地址：http://2914905399.iteye.com/blog/2357893

简单来说，webpack是一个模块打包工具，在 webpack 里，所有类型的文件都可以是模块，包括我们最常见的 JavaScript，及 CSS 文件、图片、json 文件等等。通过 webpack 的各种加载器，我们可以更高效地管理这些文件。

本文配置webpack并使网页上输出最简单的Hello, World!!! 。程序使用React js完成并使用了ES2015。

1，创建一个空项目，在项目目录下创建一个package.json 文件，用于项目名称，依赖等等，终端命令如下：

  npm init

2, 在当前目录下安装webpack以及其它依赖，由于使用React，所以引入了react和react-dom

  npm install webpack react react-dom --save-dev
  npm install webpack -g

有时webpack需要获取管理员权限才能安装成功。sudo su之后再install即可解决

3，此时目录下只有package.json 和node_modules两个文件，package.json中可以看到安装过的依赖，node_modules是install时生成的。

实现简单的HelloWorld，还需要创建一个index.html和一个入口文件index.js，出于简单，我都放在根目录。index.html为空，index.js实现网页输出HelloWorld。代码如下：

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

class HelloWorld extends Component {
    render() {
        return (
            <div>
                Hello, World ! ! !
            </div>
        )
    }
}


ReactDOM.render(
    <HelloWorld />,
    document.getElementById('content')
);

4，创建webpack配置文件webpack.config.js。并进行配置：

module.exports = {
    entry: './index.js',
    output: {
        path: '',
        filename: 'bundle.js'
    }
};

entry: 设置入口文件

output: path为webpack打包成功之后文件存放路径。 filename为webpack打包成功之后文件名称。

webpack.config.js这个名字为webpack默认的配置文件，如果不想用这个名字，可以：

webpack -config yourname

5, 安装和使用Webpack Loader。

Webpack Loader作用：

1，将React js的jsx语句转化为js语句

2，支持ES2015

3，可以是js文件通过import直接引入css等样式以及图片。

等等等。

因为我需要使用Reactjs和ES2015，所以安装命令如下：

npm install babel-core babel-loader --save-dev
npm install babel-preset-react babel-preset-es2015 --save-dev

具体实现需要在webpack-config.js中加入module属性。

module.exports = {
    entry: './index.js',

    output: {
        publicPath: "",
        filename: 'bundle.js'
    },

    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader?presets[]=es2015&presets[]=react'
            }
        ]
    }
};

6，在终端输入webpack。会看见生成了一个bundle.js文件。这个文件是webpack的entry文件打包成功之后得到的，存放路径和名字都是自己在webpack.config.js中设置的。

webpack

7，修改之前创建的index.html文件，并引入打包生成的bundle.js文件。代码如下

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="content"></div>
    <script src="bundle.js"></script>
</body>
</html>

8，打开index.html，将会看到我们需要的 Hello,World!!!。但是每次我们修改文件并运行时都需要在终端输入webpack再刷新页面。这种方式比较麻烦。此时我们需要使用webpack-dev-server来实现页面自动刷新

（1）安装webpack-dev-server

npm install webpack-dev-server --save-dev
npm install webpack-dev-server -g

（2）在package.json中添加

{
  ......
  "scripts": {
    "start": "webpack-dev-server --inline"
  },
  ......
}

（3）配置完成，在终端输入：

npm start

在浏览器里面输入http://localhost:8080/ 页面上出现Hello,World!!!。修改main.js中的Hello,World!!!为Hello,Curry!!!，等待两秒，不需要手动刷新，页面自动刷新，出现Hello,Curry!!!。完成！！！

附参考网站：http://www.jianshu.com/p/418e48e0cef1

https://www.zfanw.com/blog/webpack-tutorial.html

webpack基本安装和配置

猜你喜欢