一、webpack与构建发展简史
1.webpack初体验
1.1 创建空目录和package.json
mkdir my-project
cd my-project
**初始化
npm init -y // -y代表yes
1.2 安装webpack 和 webpack_cli
> npm i webpack webpack-cli --save dev // --save dev 代表这个依赖安装到devDependencies里面
> 检查是否安装成功： ./node_modules/.bin/webpack -v
/*注意：使用windows的小伙伴 “/”和“” */
2.一个简单的例子
2.1 代码块
// 1在my-project目录下创建一个 webpack.config.js文件
'use strict'
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
mode: 'production'
}
// 2继续在 my-project目录下创建一个 src 目录，src目录下 创建 index.js 和 helloworld.js
// index.js
import {helloworld} from './helloworld'
document.write(helloworld())
// helloworld.js
// helloworld.js 相当于创建的一个功能
export function helloworld () {
return 'Hello webpack'
}
// 3.运行
./node_modules/.bin/webpack
结果:
2.2 demo展示
在dist文件夹下 创建 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Heelo webpack</title>
</head>
<body>
<script src="./bundle.js" type="text/javascript" ></script>
</body>
</html>
3.通过npm script 运行webpack
每次我们保存文件 需要执行
./node_modules/.bin/webpack运行webpack十分麻烦，那么我们可以在package.json中的script里添加
{
"name": "my-project",
"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.44.0",
"webpack-cli": "^3.3.12"
}
}
设置完成之后，我们可以直接使用
npm run build打包，效果和./node_modules/.bin.webpack是一样的