webpack3学习1--开始

秒速五厘米 2022-06-13 10:30 141阅读 0赞

### 新建工程目录webpack-demo ###

mkdir webpack-demo && cd webpack-demo
    npm init -y
    cnpm install --save-dev webpack
    cnpm install --save lodash # JavaScript 工具库，备用

将要创建的最终工程目录如下：

创建webpack.config.js文件，添加如下内容

var path = require('path');
    module.exports = {
      entry: './src/index.js',
      output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
      }
    };

创建src目录，在src目录下新建index.js如下：

import _ from 'lodash';
    
    function component() { 
        var element = document.createElement('div');
        element.innerHTML = _.join(['Hello', 'webpack'], ' ');
        return element;
    }
    
    document.body.appendChild(component());

创建dist目录，在dist目录下新建index.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Webpack Getting Started</title>
    </head>
    <body>
    <script src="bundle.js"></script>
    </body>
    </html>

在 package.json 添加一个 npm 脚本(npm script)：

{
      ...
      "scripts": {
        "build": "webpack"
      },
      ...
    }

在webpack-demo目录下运行

npm run build

会看到在dist目录下增加了一个bundle.js，这就是webpack输出的结果。最终工程目录如下：

在webpack-demo目录下运行

http-server

浏览器访问[http://localhost:8080/dist/][http_localhost_8080_dist]，即可看到页面显示Hello webpack，如果没安装http-server，可以全局安装一个，安装命令如下

cnpm install http-server -g

现在，你已经实现了一个基本的构建过程，你应该深入了解基本概念和配置来更好地解 webpack 的设计。

本例子源代码地址：[https://github.com/wu-boy/webpack-demo][https_github.com_wu-boy_webpack-demo]，demo1目录。

参考资料：  
1.[webpack中文网站][webpack]  
2.[Webpack2 完整踩坑教程][Webpack2]

[http_localhost_8080_dist]: http://localhost:8080/dist/
[https_github.com_wu-boy_webpack-demo]: https://github.com/wu-boy/webpack-demo
[webpack]: https://doc.webpack-china.org/guides/
[Webpack2]: http://blog.csdn.net/alanfancy/article/category/6804410