学习之路基于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 [email protected]
注：--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() 方法会把一个路径或路径片段的序列解析为一个绝对路径。
} };
5、打包js文件
npm start
一切文件就绪，在项目根目录下执行 webpack 命令运行 Webpack 构建，你会发现目录下多出一个 dist目录，里面有个 bundle.js 文件， bundle.js 文件是一个可执行的 JavaScript 文件。
原文地址：https://www.cnblogs.com/weihuan/p/9631799.html
时间： 2024-10-11 16:39:42