webpack使用教程

1、webpack的概念

webpack是一个前端工具，可让各个模块进行加载、预处理，再进行打包，它有gulp和grunt的大部分基本功能，它的最大区别就是提供了模块化解决方案，能够把各类资源做为模块来使用和处理。

2、安装与相关配置（包括打包文件）

注：如下命令在安装node.js后，在其命令行工具中输入命令

步骤以下：

一、在要用的webpack的文件夹下初始化npm

命令：npm init

 

命令执行完后，会在该文件夹下产生一个package.json文件

二、初始化完后，使用npm在这个文件下安装webpack

命令：npm install webpack --save-dev

 

三、在你新建的项目文件夹下建一个新文件，如：index.js

对其进行打包

命令：webpack 打包的文件名 打包后的文件名

如：webpack index.js index.bundle.js

 

四、引入文件

（1）若是须要引入其余的的js文件，则能够直接在index.js文件头部加上代码：require('./文件路径及名字.js'),再进行打包就行,即再执行webpack index.js index.bundle.js

（2）引入css文件

方法一：

若是须要引入css文件，则能够直接在index.js文件头部加上代码：require('css-loader!./文件路径及名字.css'),可是须要先在命令行下引入css-loader和style-loader,再进行打包就行，不然会报错；

引入css-loader和style-loader的命令：npm install css-loader style-loader --save-dev

补充：

css-loader使得webpack能够处理.css文件；style-loader使得webpack能够经过在html文件插入<style>标签，将css-loader处理完的文件放入<style>标签里面；

可是若要将样式放进style标签的话，需将index.js文件引入css文件的语句，从require('css-loader!./文件路径及名字.css')改为require('style-loade!css-loader!./文件路径及名字.css')

方法二：

考虑到每次引入css文件都要加上style-loade!css-loader!，过于累赘，能够直接经过命令行方式一次性引入，那么每次引入css文件，只须要写require('./文件路径及名字.css')便可；

命令以下：webpack index.js index.bundle.js --module-bind 'css=style-loader!css-loader'

若要webpack自动打包，则使用 --watch

命令：webpack index.js index.bundle.js --module-bind 'css=style-loader!css-loader' --watch

若要webpack打包过程，则使用 --progress

若要看webpack打包模快，则使用 --display-modules

若要看webpack为何要打包这个模快，则使用 --display-reasons

 

五、在项目的根目录新建webpack的配置文件的webpack.config.js，webpack默认配置文件名为webpack.config.js，也能够经过--config来指定配置文件

如下为个人代码文件的webpack配置文件

而后直接执行命令：webpack,就会将文件进行打包

还能够直接在webpack的脚本直接配置参数

打开package.json文件，在scripts里面添加要配置的参数

而后直接在 命令行运行: npm run webpack ，就能进行打包

 

六、当要对多个文件进行分别打包时，能够直接在webpack.config.js配置文件里面配置（代码实例以下图），再运行: npm run webpack

运行结果：在./dist/js文件夹下产生

 

七、考虑到每次在.html文件如这些打包后的文件会很麻烦，能够直接经过webpack带有的插件html-webpack-plugin自动插入这些脚本文件

安装插件的代码：npm install html-webpack-plugin --save-dev

安装完后，在配置文件中引入该插件，并经过plugins参数来进行,配置代码以下， 再运行npm run webpack：

另外，webpack还支持在plugins里面进行相应的传参

还能够设置其余参数（写出一小部分），new两个htmlWebpackPlugin是因为这对两个不一样的页面进行的相关配置，直接上代码截图

补充：因为每次外部连接js文件都要发起一块儿http请求，这个操做对于性能方面不太友好，全部也能够选择直接在html文件里面插入<script>标签来插入js代码，代码示例以下：

注：上图中的login，是因为我获取的是login对应的js文件的代码；这里能够针对不一样的js文件，进行相对性的修改

3、几个核心概念的理解

• Entry：指定webpack开始构建的入口模块，从该模块开始构建并计算出直接或间接依赖的模块或者库
• Output：告诉webpack如何命名输出的文件以及输出的目录
• Loaders：因为webpack只能处理javascript，因此须要对一些非js文件处理成webpack可以处理的模块，好比sass文件
• Plugins：Loaders将各种型的文件处理成webpack可以处理的模块，plugins有着很强的能力。插件的范围包括，从打包优化和压缩，一直到从新定义环境中的变量。但也是最复杂的一个。好比对js文件进行压缩优化的UglifyJsPlugin插件
• Chunk：coding split的产物，咱们能够对一些代码打包成一个单独的chunk，好比某些公共模块，去重，更好的利用缓存。或者按需加载某些功能模块，优化加载时间。在webpack3及之前都利用CommonsChunkPlugin将一些公共代码分割成一个chunk，实现单独加载。在webpack4 中CommonsChunkPlugin被废弃，使用SplitChunksPlugin

2、做用

待续

3、优势

待续