基于Webpack搭建项目环境

1.创建项目文件夹：

mdkir hello-world-demo
cd hello-world-demo

2.初始化文件夹

npm init -y //初始化一个package.json文件
git init  //产生.git文件，便于之后版本提交回退

3.搭建webpack环境

npm i webpack -s  //安装webpack依赖，安装完成后会有node_modules文件夹生成

接下来测试webpack是否安装成功：
在根目录下创建三个文件，分别为：entry.js,bundle.js,index.html

entry.js文件  //入口文件
document.write("hello world");

index.html　
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>hello-world</title>
</head>
<body>
  <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>

bundle.js为空.

执行以下命令：

 webpack ./entry.js bundle.js

然后发现bundle.js中有很多代码，这就是经过webpack打包后的文件．在浏览器打开index.html，效果和之前一样，则说明安装成功．

4.配置webpack

创建webpack.config.js文件内容如下：

module.exports = {
  entry: "./entry.js",       //入口文件，就是想要打包的文件入口
  output: {                  //打包后的文件
      path: __dirname,  
      filename: "bundle.js"
  }
};

此时，运行webpack，打开index.html，效果与之前相同．

5.加入加载器

因为 webpack 只能处理javascript，当我们需要在项目中添加css 文件时就需要css-loader去处理 css 文件，还需要style-loader去应用样式在 css 文件中。

创建style.css文件内容如下：

body {
  background: red;
}

修改entry.js文件：

require('./style.css');           //引入css文件
document.write('Hello');

修改 webpack.config.js 文件：

module.exports = {
   entry: "./entry.js",
   output: {
      path: __dirname,
      filename: "bundle.js"
  },
   module: {
        loaders: [
        { 
              test: /\.css$/,         //表示所有的后缀为.css文件
              loader: "style-loader!css-loader" //加入处理.css文件的loader(是需要安
                                                                            装的) 
        }
    ]
 }
};

其他的非js文件都需要相应加载器来处理。
运行webpack后，打开index.html文件，背景色为红色，说明配置成功。

此时的文件目录为：

文件目录.png

6.express下运行

安装express

npm install express --save

创建 server.js 文件内容如下：

const express = require('express');
const app = new express();

app.use(express.static(__dirname + '/'));  
 //提供项目根目录下的所有静态文件。默认访问index.html。

app.listen(3000, () => {                 //监听端口为3000
    console.log('server start');
});

运行

webpack  // 用于打包文件
node server.js  // 开启服务器

打开浏览器查看localhost:3000，界面显示跟上一个配置显示一样说明成功。

7.babel 配置

babel 是支持 javascript 最新语法而不用等待浏览器的更新。
安装 babel

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

创建.babelrc文件内容如下：

{
    "presets": [
      "es2015",
      "react"
    ]
 }

新建 content.js 文件内容如下：

export default () => {
    return "hello";
}

修改entry.js 文件：

require('./style.css');
import Hello from "./content";
document.write(Hello());

运行

webpack
node server.js

打开 localhost:3000 查看界面，如果跟上面的界面一样说明配置成功。

接下来就是写react小例子测试啦，修改entry.js：

import React, {Component} from 'react';
import {render} from "react-dom";

require('./style.css');

class HelloMessage extends React.Component { 
   render() { 
      return <div>Hello World</div>;
   }
}

render(<HelloMessage />, document.getElementById('app'));

为了将组件渲染到页面，我们需要在index.html中添加一个相当于容器的div：

<!DOCTYPE html>
<html lang="en">
<head> 
    <meta charset="UTF-8"> 
    <title>test</title>
</head>
<body>
<div id="app"></div> // 添加的div，渲染至div中
<script type="text/javascript" src="bundle.js" charset="utf-8"></script></body>
</html>

至此为止，项目运行环境搭建完啦。

基于Webpack搭建项目环境

推荐阅读更多精彩内容