本篇主要内容为：
- 安装webpack和依赖的js工具库Lodash
- 通过默认配置和指定配置文件，分别打包文件
- 使用NPM脚本运行webpack
使用webpack的前提是必须安装node.js，链接：Node.js，安装方法可百度，另外下述所有npm安装方法都可以改成使用淘宝镜像的cnpm。
安装：
- 本地安装
- 全局安装
不建议全局安装，因为会将webpack锁定到指定的版本，另外也会在不同的webpack版本的项目中构建失败。
npm install --save-dev webpack //安装最新版本的webpack
因为使用的是webpack v4以上的版本，所以再安装cli工具：
npm install --save-dev webpack-cli
使用本地安装的好处是当升级项目时会比较方便，如果正确执行了上述的两个命令，会在本地目录（已有项目的根目录，我用的开发工具是vscode）多出一个node_modules目录和一个package.json文件。
//package.json文件
{
"devDependencies":{
"webpack": "^4.27.1",
"webpack-cli":^3.1.2"
}
}
这是刚才安装的依赖，此时的package.json只有三行代码，表明了webpack和webpack-cli的版本.
假如我们需要安装用来读取css文件的css-loader,再用style-loader把它插入到页面中。可以在命令行中输入：
npm install css-loader style-loader --save-dev
可以看到，在package.json中，devDependencies这个字段有个改变
"devDependencies": {
"css-loader": "^0.23.1",
"style-loader": "^0.13.0",
...
}
另外，我们也可以用另一种方式来安装：直接在package.json中，添加相应的依赖（如上面的代码），之后的命令行中运行npm install，它会自动帮我们安装相应的依赖。
打开命令行，进入到项目目录，或在vscode中用ctrl+shift+`键打开命令行，执行以下命令：
npm init
我们在安装webpack时会生成了一个package.json，而这个命令会初始化一个新的package.json，其内容会直接追加到文件中。执行npm init命令后，会向你提问一系列问题，除了名字之外，其余可以直接回车热水壶，新生成的package.json类似如下 ：
"devDependencies": {
"webpack": "^4.27.1",
"webpack-cli": "^3.1.2"
},
"name": "webpackstudy",
"description": "webpack入门学习手记",
"version": "1.0.0",
"main": "index.js",
"dependencies": {
"ajv-errors": "^1.0.1",
...
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://gitee.com/yilianzz/projects?scope=forked"
},
"author": "yilianzz",
"license": "MIT"
此时，找到官网的指南手册中的scripts，在默认的test后面添加上官网中的代码，如下 :
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack --config webpack.config.js"
}
script.start，它指的是运行webpack,并且运行的配置文件是webpack.config.js。
npm run start就会去执行配置文件中的打包代码
参考链接：https://segmentfault.com/a/1190000017384378
删掉package.json文件，按照手册给出的示例，在一个全新的目录下进行操作
npm init -y //不再询问参数，直接使用默认值
npm install webpack webpack-cli --save-dev
接下来，在项目目录下创建相应的html和js文件
webpackStudy
|- package.json
+ |- index.html
+ |- /src //新建一个src目录
+ |- index.js
src/index.js
function component() {
let element = document.createElement('div');
// Lodash, currently included via a script, is required for this line to work
// 这段英文注释的意思是说，在index.html文件中已经引入了Lodash这个script标签了，所以能正常使用
element.innerHTML = _.join(['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>
在html页面中，引入了Lodash这个js文件，它是一个JS实用工具库，非常适合于遍历数组、字符串和对象等
然后修改package.json文件，删掉main入口，并设置private,防止意外发布代码
package.json
{
"description": "",
+ "private": true,
- "main": "index.js"
}
上述中，在index.js中，并没有显示地声明需要引入Lodash，这样就会造成以下几个问题：
- 没有显示声明，index.js中的代码依赖于外部的扩展库
- 如果依赖不存在，或者引入错误，应用程序无法正常执行。例如没有引用 Lodash
- 如果依赖文件被引入了，但是没有使用，浏览器就会下载无用代码。
如果使用webpack来管理JS，情况就会不一样
创建一个打包文件
首先调整一下工作目录，创建一个dist目录，它用来存放压缩和优化之后的代码。而我们之前创建的src目录，则用来存放原始代码。将之前创建的index.html文件移动到dist目录下。最张文件结构如下:
project
webpackStudy
|- package.json
+ |- /dist
+ |- index.html
- |- index.html
|- /src
|- index.js
这次，我们要在index.js中显示地声明Lodash，所以先在项目目录下安装Lodash，执行命令：
npm install --save-dev lodash
--save-dev参数，会将Lodash添加到package.json的devDependencies属性下
接下来，显示地引用Lodash
src/index.js
+ import _ from 'lodash';
+
function component() {
let element = document.createElement('div');
- // Lodash, currently included via a script, is required for this line to work
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component())
然后更新index.html,因为我们修改了依赖js的方式
dist/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>
+ <script src="main.js"></script>
</body>
</html>
最后，执行下面的命令
npx webpack
然后打开index.html文件，就会看到hello webpack。由于我们在执行npx webpack时，没有使用执行的配置文件，所以使用默认值，也就是在dist目录下生成main.js。而这个打包之后的文件，就在index.html引入。如果打开main.js，会发现Lodash已经在这个文件中了，webpack会自动帮我们添加好。
指定配置文件
在webpack4中，不用指定配置文件，但是这样会导致可扩展性变差，因此我们需要在工作目录下创建一个webpack.config.js文件。内容如下
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js', //就是上面生成的main.js
path: path.resolve(__dirname, 'dist')
}
};
然后执行命令：
npx webpack --config webpack.config.js
如果添加了webpack.config.js文件，则webpack会自动使用这个配置文件，所以也可以不指定这个参数。但是假如文件的名称不是webpack.config.js时，就必须用到--config这个参数了。
NPM脚本
前面部分中，在package.json中添加了scripts.start，现在同样地在package.json中添加一段脚本，这样我们在每次运行程序时只需要简单调用脚本即可
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js"
}
然后只需要在命令行中执行如下命令：
npm run build
它制定了package.json中的script脚本，其中build就是我们刚才定义内容。
网友评论