大家好，我是狗蛋~
平时写项目都是用脚手架，对于webpack真的是一概不知~
前几天在慕课学习《webpack深入与实战》，发现这个真的的从零开始学习，而且是1.X版本的webpack，很适合我这种小白，因为我是最近学习，所以用的是4.6版本的，所以我会用4.6的版本翻转。
我会把作者的描述写进来，该篇就当做是视频的笔记版与我的遇坑记录。
webpack是给js的打包工具，可以把很多的模块打包成很少的一些静态文件，它有自己的一个特性——代码分割（Code Splitting），代码分割可以使项目加载过程中只去当时需要的那部分文件，webpack整个工具里面有一个loader的概念，模块可以通过loader去处理各种各样的文件，无论文件是commonjs还是AMD还是es6，模块化方式写的，都可以通过loader处理，甚至可以处理css文件、图片文件、js文件、coffeescript文件，less文件，甚至自定义文件（.vue，.jsx）
2018.04.20更新。
找到一篇webpack2.X的与视频内容类似的文章
webpack实用配置
接下来在demo01文件夹操作
npm init // 初始化npm
npm install webpack -D // 本地安装webpack
新建一个hello.js
function hello(str){
alert(str);
}
然后打包hello.js
webpack hello.js hello.bundle.js // hello.js要打包的文件 hello.bundle.js打包后生成的文件
突发情况：这里打包我出了问题，他说我'webpack' 不是内部或外部命令
百度了一下，webpack不是内部命令有两种解决方法
- 先全局安装，再在自己工作目录安装使用（不推荐）
- 在package.json中添加script，就可以用npm run name执行webpack命令了，name可以任取（推荐）
所以我在package.json的script属性加了一行"start": "webpack"，然后命令行输入npm run start，然后爆问题。
在webpack 3中，webpack本身和CLI都在同一个包中，但是在版本4中，他们将两者分开来更好地管理它们。
所以我要say yes，本地装webpack-cli，装好之后又报问题，黄色警告是要在语句中加模式，如图我写的。至于红色的字，算了，加配置文件吧！
webpack.config.js
module.exports = {
entry: './hello.js',
output: {
filename: 'bundle.js'
}
}
然后运行npm run start，成功了
打包成功之后会给出信息
Hash: 本次打包哈希值
Version: webpack版本
Time: 本次打包所花时间
Asset: 生成的文件
Size: 生成的文件大小
Chunks: 这次打包的分块
Chunk Names: 这次打包的块名称
在生成的dist文件夹中的bundle.js打开，拉到最下面可以看到我们写的hello.js的东西，变样了，哈哈哈
demo02新开一个文件夹，使hello.js引用别的js文件
新建一个world.js
function world(){
return {}
}
在hello.js引用world.js
require('./world.js');
function hello(str){
alert(str);
}
然后运行npm run start，成功了
并没有视频中说的[0]，[1]模块表示出来....
demo03 webpack怎么处理css文件
不要觉得奇怪，演示而已，你就当做历史过程吧。。。
新建一个style.css
body {
background: lightskyblue;
}
在hello.js引用style.css
require('./world.js');
require('./style.css');
function hello(str){
alert(str);
}
然后运行npm run start，按照视频所说的，会报错，好的，如愿报错~
你需要一个适当的loader处理css文件，好的，在目录下（本地）安装这个loader
npm install css-loader style-loader -D
并且给相应的文件指定的loader require('css-loader!./style.css'); 全部代码如下：
// hello.js
require('./world.js');
require('css-loader!./style.css');
function hello(str){
alert(str);
}
然后运行npm run start，成功~
demo04创建一个index.html更直观的看到css的效果
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack test</title>
</head>
<body>
<script src="./dist/bundle.js"></script> // 这里因为我们是另外新建的html来引入生成后的js，所以是双击打开html文件查看效果
</body>
</html>
hello.js
require('./world.js');
require('css-loader!./style.css');
function hello(str){
alert(str);
}
hello('hello world!');
然后npm run start，成功~双击打开html文件查看效果
少了style-loader处理文件了，css-loader是处理css文件，style-loader是处理css-loader处理完的文件，新建style标签插入html文件。所以，要改一下
// hello.js
require('./world.js');
require('style-loader!css-loader!./style.css');
function hello(str){
alert(str);
}
hello('hello world!');
然后npm run start，成功~
除了在文件中引用css时，加入loader，也可以在命令行加入loader，但是真正开发不会这样做的，我这里就不演示了....
明晚或后晚再演示一整个小项目那种~
2018.04.21 更~
demo05 建立项目
在demo05文件夹中创建文件夹，然后初始化npm，本地安装webpack、webpack-cli，项目标配~
npm init
npm install webpack webpack-cli -D
新建文件夹src（放代码）、dist（放打包后生成文件）以及初始化页面index.html
再在src文件夹中创建script（放脚本）与style（放样式）文件夹
创建webpack.config.js
我们之所以在项目下建立一个webpack配置文件是因为我们直接使用webpack命令，webpack会在根目录下直接找到webpack.config.js，把它当做默认配置去运行
编辑webpack.config.js
module.exports = { // commonjs的模块化输出
entry: './src/script/main.js', // 打包入口从哪开始 相对路径
output: { // 打包以后的文件放什么地方
path: __dirname + '/dist/js', // 之前定义好的dist文件下的js文件夹 绝对路径
filename: 'bundle.js', // 打包以后的文件名叫什么
}
}
在script文件夹下新建main.js
编辑main.js
function helloworld(){}
在命令行输入webpack
那我在package.json里的script属性写命令了
编辑package.json，该文件不能有注释
{
"name": "demo05",
"version": "1.0.0",
"scripts": {
"dev": "webpack --mode development", // 没有写模式webpack4.6会出警告
"build": "webpack --mode production" // 没有写模式webpack4.6会出警告
},
"license": "ISC",
"devDependencies": {
"webpack": "^4.6.0",
"webpack-cli": "^2.0.15"
}
}
在dist/js文件夹下可以看到bundle.js，还压缩了
如果把webpack.config.js命名为webpack.dev.config.js，执行的webpack命令是webpack --config webpack.dev.confit.js，因为默认的是webpack.config.js，否则会报错。
视频里讲到webpack的命令参数，--progress显示进度，--display-modules显示打包模块，--colors显示信息有颜色，--display-reason打包原因，4.6版本除了没有显示进度，其他都没什么效果。所以就不演示了。
在nodejs中也可以使用webpack，直接把webpack配置作为一个对象传给webpack。日常中很可能用nodejs写工具，在工具里面调用webpack，就会用到这种方式。这块内容后面会谈到。
webpack.config.js配置讲解
-
entry
webpack打包入口指示，有三种输入方式来匹配不同需求- (1) string，指定一个入口文件，所有的依赖都在这个入口文件指定
- (2) 数组，为了解决多个互不依赖的文件打包在一起，例如
entry: ['./src/script/main.js','./src/script/a.js'] - (3) 对象，key表示chunk name，value表示真的的一个入口，value既可以是string，也可以是数组。使用场景是在多页面应用，根据page1、page2给不同页面不同的chunk，page1入口是main.js，page2入口是a.js。例如：
entry: { "page1": './src/script/main.js', "page2": ['./src/script/a.js'], // 打包入口从哪开始 相对路径 }
-
output
官网中指明不要在filename中使用绝对路径，因为path会真正指定路径。如果entry是单文件，那么filename就是可以写死，如bundle.js。如果entry是多入口，filename还是写死一个文件，那会造成覆盖，只生成一个文件。所以需要占位符保证输出是唯一的，如[name]表示chunkname，entry表示作为对象时的key、[hash]是这次打包的hash、[chunkhash]是每一个chunk的hash。demo06作为该例子。// webpack.config.js module.exports = { // commonjs的模块化输出 entry: { "main": './src/script/main.js', "a": ['./src/script/a.js'], // 打包入口从哪开始 相对路径 }, output: { // 打包以后的文件放什么地方 path: __dirname + '/dist/js', // 之前定义好的dist文件下的js文件夹 绝对路径 filename: '[name].[hash:6].js', // 打包以后的文件名叫什么 } }
demo07 自动化生成项目中的html页面
我们打包之后的js要在html里引用，但是我们不可能每次打包就手动改一次，为解决这个问题，我们可以使用html-webpack-plugin插件。
本地安装插件npm install html-webpack-plugin -D
这个插件的介绍，也有中文的详细介绍
