Webpack4入门1初始化项目

最新推荐文章于 2022-05-19 22:05:41 发布

buyue__

最新推荐文章于 2022-05-19 22:05:41 发布

阅读量149

点赞数

分类专栏： Webpack

本文链接：https://blog.csdn.net/buyueliuying/article/details/103221306

版权

Webpack 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在阅读本文章之前有必要把Webpack相关的概念快速过一遍，有利于加快理解

cd /website
mkdir webpackDemo
cd webpackDemo
npm init -y

安装 webpack 和 webpack-cli （Webpack 4.0以后需要单独安装）

npm install webpack webpack-cli --save-dev

安装成功后的目录结构如下：
在这里插入图片描述

创建以下目录结构、文件和内容

webpackDemo
   |- package.json
+ |- index.html
+ |- /src
+   |- index.js

src/index.js

function component() {
  var element = document.createElement('div');

  // Lodash（目前index.html通过一个 script 脚本引入）对于执行这一行是必需的
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

index.html

<!doctype html>
<html>
  <head>
    <title>起步</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

直接用浏览器浏览index.html可以看到效果；

index.html的lodash是通过script标签引入的；

这里我们要把lodash和index.js打包在一起形成一个新的文件main.js，为此引出了源代码和 目标代码分离

源代码是指 /src 目录下的代码，目标代码是指 /dist 目录下的代码，前者是开发人员编写而来，后者是程序通过打包源代码构建而来

我们要在 index.js 中打包lodash依赖，请确保lodash已安装

npm install lodash --save

现在，在我们的脚本中 import lodash：

src/index.js

//导入lodash
import _ from 'lodash';

function component() {
  var element = document.createElement('div');

  // 上面import语句引入Lodash，使其有效
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

终端执行打包

npx webpack

项目自动生成了/dist/main.js ，这个文件已经包含了lodash和index.js的代码了
这里的main.js就是bundle

调整index.html

<!doctype html>
<html>
  <head>
    <title>起步</title>
    <!--<script src="https://unpkg.com/lodash@4.16.6"></script>-->
  </head>
  <body>
    <script src="./dist/main.js"></script>
  </body>
</html>

在浏览器中打开 /dist/index.html，跟之前看到的效果一致

buyue__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Webpack4入门1初始化项目

在阅读本文章之前有必要把Webpack相关的概念快速过一遍，有利于加快理解cd /websitemkdir webpackDemocd webpackDemonpm init -y安装 webpack 和 webpack-cli （Webpack 4.0以后需要单独安装）npm install webpack webpack-cli --save-dev安装成功后的目录结构如下：...
复制链接

扫一扫