The way of Webpack learning (I.) -- Configure Webpack from zero（从零开始配置webpack）

最新推荐文章于 2025-04-03 09:43:10 发布

转载最新推荐文章于 2025-04-03 09:43:10 发布 · 170 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/weihuan/p/9631799.html

文章标签：

#webpack #javascript #json #ViewUI

本文详细介绍了如何使用Webpack3.10.0进行项目初始化、配置及JS文件打包流程。从创建package.json，定义npm script，安装Webpack，到构建JS工具函数，设置webpack.config.js，最终实现JS文件的打包输出。

学习之路基于webpack3.10.0，webpack4.0之后更新。

一：开始前的配置

1、初始化项目，其实就是新建一个package.json文件，后面的命令依赖里面的配置项。

npm init

2、修改npm script定义的任务，新增一项。

"scripts": {
    "start": "webpack --config webpack.config.js"
}

3、安装webpack

 npm i -D webpack@3.10.0

注：--save --dev 和 --save的区别？

答：--save --dev是开发环境需要的包，添加到devDependencies里面。

--save是生产环境需要的包，添加到dependencies里面。

二：使用webpack打包Js文件

1、页面入口文件 index.html

<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
　　<div id="app"></div>
　　<!--导入 Webpack 输出的 JavaScript 文件-->
　　<script src="./dist/bundle.js"></script>
</body>
</html>

2、JS 工具函数文件 show.js

// 操作 DOM 元素，把 content 显示到网页上
function show(content) {
  window.document.getElementById('app').innerText = 'Hello,' + content;
}

// 通过 CommonJS 规范导出 show 函数
module.exports = show;

3、JS 执行入口文件 main.js

// 通过 CommonJS 规范导入 show 函数
const show = require('./show.js');
// 执行 show 函数
show('Webpack');

4、Webpack 在执行构建时默认会从项目根目录下的 webpack.config.js 文件读取配置，所以你还需要新建它，其内容如下：

const path = require('path');

module.exports = {
  // JavaScript 执行入口文件
  entry: './main.js',
  output: {
    // 把所有依赖的模块合并输出到一个 bundle.js 文件
    filename: 'bundle.js',
    // 输出文件都放到 dist 目录下
    path: path.resolve(__dirname, './dist'),//path.resolve() 方法会把一个路径或路径片段的序列解析为一个绝对路径。