一、初识webpack
什么是webpack?官网介绍是 module bundler,JavaScript
的模块打包器,大概意思就是,能够将一堆关系错综复杂的.js
,.css
,.sass
等文件,打包成几个静态的文件,在 html 里面直接插入实用,webpack中包含了gulp自动打包工具、包含了babel转es5压缩等...
另外,Webpack4正式发布以后。只要使用npm install webpack命令,默认安装的就是版本4。webpack3和webpack4的搭建区别还是挺大的,丢哥在这里提醒大家如果对版本的变更不是很了解的情况下,就会被网上各种Webpack的教程弄混淆,特别是一些通过视频学习的同学看的是几年前的教程,使用的是Webpack3,这样就会导致各种无法预知的错误。
- npm相关命令了解
初始化新项目
npm init
全局安装依赖包package,不属于具体哪个项目
npm install --global package
安装运行时依赖包PACKAGE,会打包至最终生成文件
npm install --save package
安装开发时依赖包package,不会出现在生产文件中(正式运营环境)。webpack就属于开发时用来打包文件,在运行时就不需要它了。
npm install --save-dev package
执行命令,具体命令配置在package.json中
npm run command
同时以上安装依赖命令也有简写模式
npm i -g package
npm i -S package
npm i -D package
二、安装webpack
首先要安装 Node.js, Node.js 自带了软件包管理器 npm,Webpack 需要 Node.js v0.6 以上支持,建议使用最新版 Node.js,全局安装webpack
$ npm install webpack -g #全局安装webpack
此时 Webpack 已经安装到了全局环境下,可以通过命令行 webpack -h
试试。
通常我们会将 Webpack 安装到项目的依赖中,这样就可以使用项目本地版本的 Webpack。
$ mkdir demo # 创建一个demo目录
$ cd demo
$ npm init # 初始化一个项目,生成package.json
# 安装webpack与webpack-cli
$ npm install --save-dev webpack
$ npm install --save-dev webpack-cli
同时检查,package.json文件中"devDependencies"本地配置中会新增webpack和webpack-cli的配置文件,如果有,那么成功了。
二、打包实现
mkdir src # 创建src目录
- 在src/index.html中写入:
<!-- index.html -->
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="../dist/bundle.js"></script>
</body>
</html>
- 在main.js中写入:
// main.js
document.write('It works for main.js')
- 在package.json中配置scripts【dist文件夹和bundle.js会自动生成】:
"scripts": {
"build": "webpack ./src/main.js -o ./dist/bundle.js --mode development"
},
- 最后在终端中使用如下命令:
npm run build # 使用webpack进行打包了

三、webpack.config.js配置
这里具体的部分不做详细的解释,大家可以参考下面的代码,同时结合webpack官方文档进行学习,相信进过此番学习,大家可以掌握webpack的基本使用方法。
// 这是webpack的配置文件,当 npm run build 会自动找webpack.config.js
// 这个配置未见时运行在node环境下的,这个配置文件书写方法是node.js语法
const path = require("path");
module.exports = {
//入口文件
entry: path.join(__dirname, "./src/main.js"),
//出口
output: {
//配置出口文件得目录
path: path.join(__dirname, './dist'),
filename: 'bundle.js'
},
mode: "development",
}
四、常用插件
package.js文件如下:这样给大家一个参考,哪些是需要本地安装(–save-dev)的,哪些是需要依赖生产环境安装的(–save)。各种类型文件的安装的具体指令都可以参考webpack官方文档,文档中都写得比较清楚。
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack", # 当项目需要上线的时候,使用npm run build可以生成生产环境下的相关文件。
"dev": "webpack-dev-server" # 在项目开发过程中使用npm run dev 可以实现自动更新页面的效果,但是仅供项目开发过程中使用,因为无法生成生产环境下的相关文件。
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"css-loader": "^3.1.0",
"file-loader": "^4.1.0",
"html-webpack-plugin": "^3.2.0",
"less": "^3.9.0",
"less-loader": "^5.0.0",
"style-loader": "^0.23.1",
"url-loader": "^2.1.0",
"webpack": "^4.44.1",
"webpack-cli": "^3.5.1",
"webpack-dev-server": "^3.7.2"
},