Webpack简易入门教程

时间 2019-11-24

标签 webpack 简易入门教程繁體版

原文原文链接

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

项目结构

--your project
  |--prod
    |--components
      |--first.js
    |--index.js
  |--build
    |--index.html
    |--bundle.js

用npm安装依赖

npm init ，填写信息默认便可html

npm install react --save-dev 安装reactjava

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

npm install webpack --save-dev 安装webpackreact

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

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

建立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：指入口文件的配置项github

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

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

接着配置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