从0开始使用webpack4构建静态网站（二） - 开始使用

最新推荐文章于 2024-05-13 09:40:40 发布

hayleyxia

最新推荐文章于 2024-05-13 09:40:40 发布

阅读量1.5k

点赞数 1

分类专栏： web开发

本文链接：https://blog.csdn.net/hayleyxia/article/details/80501807

版权

web开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

webpack用来编译javascript模块，安装成功以后就可以通过cli或者api与webpack交互。

基本设置：

首先创建一个目录，初始化npm，然后本地安装webpack，webpack-cli（可以在命令行执行webpack的工具）

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

然后创建如下的目录结构

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

src/index.js

function component() {
  var element = document.createElement('div');
  element.innerHTML = 'Hello Webpack';
  return element;
}

document.body.appendChild(component());

index.html

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

在这个例子中，<script>标签中明确了依赖的javascript文件，lodash在页面执行前加载，index.js并没有使用到_，只是用来确保变量_存在。用这种方式管理javascript项目有以下问题：

脚步是否依赖一个外部库并不是显而易见的。
如果依赖丢失了，或者加载顺序不对，应用的功能就会执行不正确。
如果依赖引用了但并没有使用到，就会造成下载不必要的代码。

下面我们用webpack来管理这些脚本。

创建Bundle

我们在当前目录执行 npx webpack， npx命令，搭载在Node 8.2或更高版本，可以执行webpack包中的webpack命令。

webpack-demo
  |- package.json
  |- /dist
    |- main.js
  |- /src
    |- index.js

自动在dist目录下生成了main.js打包后的文件，并自动寻找入口文件index.js. 可以看到webpack4是零配置的，默认是production模式。如果想要开发模式，可以使用 npx webpack -- mode development

index.html并没有做任何处理，我们将在后面介绍如何处理html文件。

使用配置文件

虽然webpack4不需要任何配置，但是多数项目都需要复杂配置，这也是为什么webpack支持配置文件。这也比手动在终端输入很多命令要高效。下面我们就创建一个配置文件来替代cli的命令选项。

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

webpack.config.js

const path = require('path');

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

以下命令使用配置文件来构建

npx webpack --config webpack.config.js

NPM脚本

package.json

{
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
+     "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "webpack": "^4.0.1",
      "webpack-cli": "^2.0.9",
      "lodash": "^4.17.5"
    }
  }

现在就可以用npm run build命令来替换刚才使用的npx命令。

hayleyxia

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
从0开始使用webpack4构建静态网站（二） - 开始使用

webpack用来编译javascript模块，安装成功以后就可以通过cli或者api与webpack交互。基本设置：首先创建一个目录，初始化npm，然后本地安装webpack，webpack-cli（可以在命令行执行webpack的工具）mkdir webpack-demo &amp;&amp; cd webpack-demonpm init -ynpm install webpack we...
复制链接

扫一扫

专栏目录