webpack快速构建一个测试的demo

2019-06-25 本文已影响0人最底层的技术渣

第一步：创建项目结构

首先我们创建两个目录并创建两个index的文件

mkdir demo 
mkdir src

项目结构

  webpack4
+ |- package.json
+ |- /demo 
+   |- index.html
+ |- /src
+   |- index.js #入口文件

第二步：安装 loadash 依赖和编写 js 文件 (生产环境需要的依赖)

npm install --save lodash #或者 npm i lodash -P

F:\git\webpack4\src>npm i lodash -P
npm WARN webpack4@1.0.0 No description
npm WARN webpack4@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ lodash@4.17.11
added 1 package in 7.46s

image.png

编写：src/index.js 文件

import _ from 'lodash';

function createDomElement() {
  var dom = document.createElement('div');
  dom.innerHTML = _.join(['aicoder', '.com', ' wow'], '');
  return dom;
}

document.body.appendChild(createDomElement());

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>起步</title>
</head>
<body>
  <script src="./main.js"></script>
</body>
</html>

第三步：编写 webpack 配置文件

根目录下添加 webpack.config.js文件。

  webpack-demo
  |- package.json
+ |- webpack.config.js
  |- /dist
    |- index.html
  |- /src
    |- index.js

webpack.config.js 内容如下：

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, './dist')
  }
};

执行构建任务

直接执行构建任务：

npx webpack

F:\git\webpack4>npx webpack
npx: installed 1 in 10.719s
Path must be a string. Received undefined
F:\git\webpack4\node_modules\webpack\bin\webpack.js
Hash: 98c8a3b616aa10e0eecb                                                                                                       
Version: webpack 4.35.0                                                                                                          
Time: 395ms                                                                                                                      
Built at: 2019-06-25 20:43:35                                                                                                    
  Asset     Size  Chunks             Chunk Names                                                                                 
main.js  551 KiB    main  [emitted]  main                                                                                        
Entrypoint main = main.js                                                                                                        
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {main} [built]                                  
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {main} [built]                                  
[./src/index.js] 289 bytes {main} [built]                                                                                        
    + 1 hidden module

打开： dist/index.html 可以查看到页面的结果。

webpack快速构建一个测试的demo

猜你喜欢

热点阅读