Webpack的使用指南-Webpack小结

参考文章：

https://baijiahao.baidu.com/s?id=1594972657801970108&wfr=spider&for=pc

使用Webpack有一段时间了，可是感受以前学的用的都比较零散，因此在这里整理一下Webpack的使用知识，从入门到进阶。

建立项目

首先建立最简单的一个项目

npm init

获得如下项目结构：

安装Webpack

先来个全局的

npm i webpack -g

再安装项目中的

npm i webpack --save-dev

此时项目结构为，且注意到package.json中自动生成了对webpack的开发依赖：

Webpack的打包初体验

如今让咱们用Webpack来打包文件，那么新建一个js文件以下：

而后执行命令

webpack ./src/app.js ./build/bundle.js

那么就会在根目录下生成一个build文件夹，里面会有一个bundle文件

能够查看bundle.js的js文件信息，里面的做用就是用了一个当即执行函数，而后将app.js的内容封装成一个函数，做为参数传进内部执行。这样就能够来分析处理依赖什么的了。原理就是这个样子，具体的能够本身看一下底层代码就行，对于这种只打包一个文件的bundle.js，代码也很好看懂。

每次打包都这样输入一大串命令明显很烦，因此须要用到package.json的脚本功能，很简单，修改它为：

{"name": "webpack-demo", "version": "1.0.0", "description": "webpack的使用demo", "main": "index.js", "author": "韩子卢","license": "MIT", "devDependencies": { "webpack": "^3.10.0" },"scripts": { "build": "webpack ./src/app.js ./build/bundle.js" }}

对比以前的文件内容，明白玩法就行了，而后咱们若是再想打包，那么运行命令：

npm run build

也行，固然命令不必定要用build，把在package.json 里把build改成dota都行，此时运行的命令天然是：

npm run dota

这样作的好处是，简单方便，一些命令就不用记下来了，其次其余人很容易知道这个项目中如何进行打包。

Webpack命令的一些经常使用参数

参数 做用

-p 对打包的文件进行压缩

-d 提供source map，方便调式代码

--watch 监控源文件，若是源文件作了修改，那么立马生成新的打包文件

webpack的配置文件

通常使用webpack都不会直接用webpack命令来生成某个脚本，由于它还有些强大的功能很差在简单命令里面实现，这个时候就须要用到webpack的配置文件了。

此时在根目录下新增一个文件：

而后命令行运行：

webpack

此时webpack会自动检索根目录下的webpack.config.js文件，而后根据这个文件中的配置去打包文件。接下来咱们分析一下webpack.config.js的代码：

module.exports = {entry: './src/app.js', output: { filename: './build/bundle.js' }};

module.exports为导出对象，webpack会直接读取这个导出对象来打包代码，因此咱们将打包的配置直接赋值给这个对象。entry表明入口，即打包的时候从哪一个文件开始打包，output表明输出配置，即打包后生成的文件配置，其中的filename表明文件名。上面的打包配置能够简单理解为，从'./src/app.js'文件开始打包，生成一个文件名为bundle.js的文件，它的路径是'./build/bundle.js'。

这里咱们也能够这么写：

module.exports = {entry: './src/app.js', output: { path: __dirname + '/build', filename: 'bundle.js' }};

注意，这里的path表明文件的输出目录，当咱们用了path以后，filename就直接写文件名，而不要再写路径了，由于新的路径是path来的，若是还按照原来的，会在build文件夹下再生成一个build文件夹。此时看到配置中还出现了一个__dirname变量，这个变量咱们也没赋值，放的是什么呢?__dirname其实是webpack在编译时本身内部加上的一个变量，它表明webpack.config.js这个文件在电脑中的绝对路径。想到这么玩的好处了吗，好比利用在filename中加相对路径能够直接生成文件到电脑中的发布网站下面。

webpack的插件

webpack的功能强大有一部分的缘由就是插件的功能多且强。

然而咱们在使用插件前须要明白一点，咱们使用的目的是为了解决问题，而不是为了使用而使用。如今咱们项目的问题是什么？首先没有html，这个简单，直接新建一个html便可，不须要插件。

可是若是这样玩的话，每次生成的js文件名都是bundle.js，那么网站就会造成缓存，致使明明发布了也没有效果啊。解决这个问题的办法是在js后面加版本号，好比bundle.v1_1_0.js，咱们能够手工操做进行修改，可是总有忘记的时候，这样就会出错。那么问题就这么产生了，解决这个问题的插件就是：html-webpack-plugin。接下来让咱们来开始使用这个插件。首先webpack内部没有集成这个插件，须要咱们去安装：

npm i html-webpack-plugin --save-dev

而后删掉index.html，并修改webpack.config.js为：

var HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: './src/app.js', output: { path: __dirname + '/build', filename: 'bundle.js' }, plugins: [new HtmlWebpackPlugin()]};

此时运行

webpack

能够发如今咱们的输出目录build下还生成了一个index.html,里面还自动引入了咱们生成的的bundle.js。

但是这样并无解决咱们的问题，那么让咱们来使用html-webpack-plugin的更多功能，修改webpack.config.js文件为：

var HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: './src/app.js', output: { path: __dirname + '/build', filename: 'bundle.js' }, plugins: [ new HtmlWebpackPlugin({ title: "Webpack Demo", filename: 'demo.html', minify: { collapseWhitespace: true, }, hash: true })]};

生成后发如今输出目录生成的html文件名变味了demo.html，html的标题成了Webpack Demo，引用的js有了hash值，而且html还被压缩了，去掉了里面全部可折叠的空白元素。

这样就好了吗？不够的，实际的开发过程当中咱们遇到html结构没有这么简单，会须要更多的html结构。就好比我想在生成的html中引入一个bootstrap的css。这又是一个新的问题，然而html-webpack-plugin的模板功能能够解决这个问题。新建一个模板html文件template.html，

修改webpack.config.js为：

这样就会以index.html文件为模板生成最后的html文件，固然html-webpack-plugin还有更多的功能，这里就不细说了!

 

 

 

使用Webpack有一段时间了，可是感受以前学的用的都比较零散，因此在这里整理一下Webpack的使用知识，从入门到进阶。

建立项目

首先建立最简单的一个项目

npm init

获得如下项目结构：

安装Webpack

先来个全局的

npm i webpack -g

再安装项目中的

npm i webpack --save-dev

此时项目结构为，且注意到package.json中自动生成了对webpack的开发依赖：

Webpack的打包初体验

如今让咱们用Webpack来打包文件，那么新建一个js文件以下：

而后执行命令

webpack ./src/app.js ./build/bundle.js

那么就会在根目录下生成一个build文件夹，里面会有一个bundle文件

能够查看bundle.js的js文件信息，里面的做用就是用了一个当即执行函数，而后将app.js的内容封装成一个函数，做为参数传进内部执行。这样就能够来分析处理依赖什么的了。原理就是这个样子，具体的能够本身看一下底层代码就行，对于这种只打包一个文件的bundle.js，代码也很好看懂。

每次打包都这样输入一大串命令明显很烦，因此须要用到package.json的脚本功能，很简单，修改它为：

{"name": "webpack-demo", "version": "1.0.0", "description": "webpack的使用demo", "main": "index.js", "author": "韩子卢","license": "MIT", "devDependencies": { "webpack": "^3.10.0" },"scripts": { "build": "webpack ./src/app.js ./build/bundle.js" }}

对比以前的文件内容，明白玩法就行了，而后咱们若是再想打包，那么运行命令：

npm run build

也行，固然命令不必定要用build，把在package.json 里把build改成dota都行，此时运行的命令天然是：

npm run dota

这样作的好处是，简单方便，一些命令就不用记下来了，其次其余人很容易知道这个项目中如何进行打包。

Webpack命令的一些经常使用参数

参数 做用

-p 对打包的文件进行压缩

-d 提供source map，方便调式代码

--watch 监控源文件，若是源文件作了修改，那么立马生成新的打包文件

webpack的配置文件

通常使用webpack都不会直接用webpack命令来生成某个脚本，由于它还有些强大的功能很差在简单命令里面实现，这个时候就须要用到webpack的配置文件了。

此时在根目录下新增一个文件：

而后命令行运行：

webpack

此时webpack会自动检索根目录下的webpack.config.js文件，而后根据这个文件中的配置去打包文件。接下来咱们分析一下webpack.config.js的代码：

module.exports = {entry: './src/app.js', output: { filename: './build/bundle.js' }};

module.exports为导出对象，webpack会直接读取这个导出对象来打包代码，因此咱们将打包的配置直接赋值给这个对象。entry表明入口，即打包的时候从哪一个文件开始打包，output表明输出配置，即打包后生成的文件配置，其中的filename表明文件名。上面的打包配置能够简单理解为，从'./src/app.js'文件开始打包，生成一个文件名为bundle.js的文件，它的路径是'./build/bundle.js'。

这里咱们也能够这么写：

module.exports = {entry: './src/app.js', output: { path: __dirname + '/build', filename: 'bundle.js' }};

注意，这里的path表明文件的输出目录，当咱们用了path以后，filename就直接写文件名，而不要再写路径了，由于新的路径是path来的，若是还按照原来的，会在build文件夹下再生成一个build文件夹。此时看到配置中还出现了一个__dirname变量，这个变量咱们也没赋值，放的是什么呢?__dirname其实是webpack在编译时本身内部加上的一个变量，它表明webpack.config.js这个文件在电脑中的绝对路径。想到这么玩的好处了吗，好比利用在filename中加相对路径能够直接生成文件到电脑中的发布网站下面。

webpack的插件

webpack的功能强大有一部分的缘由就是插件的功能多且强。

然而咱们在使用插件前须要明白一点，咱们使用的目的是为了解决问题，而不是为了使用而使用。如今咱们项目的问题是什么？首先没有html，这个简单，直接新建一个html便可，不须要插件。

可是若是这样玩的话，每次生成的js文件名都是bundle.js，那么网站就会造成缓存，致使明明发布了也没有效果啊。解决这个问题的办法是在js后面加版本号，好比bundle.v1_1_0.js，咱们能够手工操做进行修改，可是总有忘记的时候，这样就会出错。那么问题就这么产生了，解决这个问题的插件就是：html-webpack-plugin。接下来让咱们来开始使用这个插件。首先webpack内部没有集成这个插件，须要咱们去安装：

npm i html-webpack-plugin --save-dev

而后删掉index.html，并修改webpack.config.js为：

var HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: './src/app.js', output: { path: __dirname + '/build', filename: 'bundle.js' }, plugins: [new HtmlWebpackPlugin()]};

此时运行

webpack

能够发如今咱们的输出目录build下还生成了一个index.html,里面还自动引入了咱们生成的的bundle.js。

但是这样并无解决咱们的问题，那么让咱们来使用html-webpack-plugin的更多功能，修改webpack.config.js文件为：

var HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: './src/app.js', output: { path: __dirname + '/build', filename: 'bundle.js' }, plugins: [ new HtmlWebpackPlugin({ title: "Webpack Demo", filename: 'demo.html', minify: { collapseWhitespace: true, }, hash: true })]};

生成后发如今输出目录生成的html文件名变味了demo.html，html的标题成了Webpack Demo，引用的js有了hash值，而且html还被压缩了，去掉了里面全部可折叠的空白元素。

这样就好了吗？不够的，实际的开发过程当中咱们遇到html结构没有这么简单，会须要更多的html结构。就好比我想在生成的html中引入一个bootstrap的css。这又是一个新的问题，然而html-webpack-plugin的模板功能能够解决这个问题。新建一个模板html文件template.html，

修改webpack.config.js为：

这样就会以index.html文件为模板生成最后的html文件，固然html-webpack-plugin还有更多的功能，这里就不细说了!