webpack安装与核心概念

• 安装webpack
• webpack核心概念：入口、输出、加载器、插件、模块、模式

 1、安装webpack

1.安装webpack以前须要安装nodejs环境，在使用nodejs环境自带的包管理工具npm进行下载，因为网络环境问题，建议安装先安装淘宝的镜像cnpm来实现下载。

npm install webpack -g

因为webpack从3版本升级到4版本，拆分了命令行接口webpack-cli，因此这时候你直接使用webpack会报错，还须要下载安装一个webpack-cli，再使用webpack。

npm install webpack-cli -g

而后就能够开始再你的工做区间使用webpack了，须要注意的是在你的工具区间内必需要有src文件夹，而且在文件下面有个index.js文件，这是针对无配置的测试状况，有配置的大神跳过。

webpack

经过webpack打包后会在工具区间下生成一个文件夹dist，而且文件夹下有一个main.js，这个main.js是由webpack打包生成的，在HTML结构文件中引入这个main.js测试你的代码。

 

2.在webpack中默认支持ES6模块化和Commonjs模块化，而且能够同时混合使用。看下面示例：（同时演示经过webpack指定打包文件且指定打包到某个文件）

使用ES6的模块化定义一个sum.js

export default function sum(a,b){
    return a + b;
}

使用Commonjs模块化定义一个minus.js

module.exports = function(a,b){
    return a - b;
}

在demo.js主入口文件引入这两个模块，并使用模块的功能：

import sum from './sum';
var minus = require('./minus');
console.log(sum(2,4),minus(4,2));

而后经过webpack将demo.js打包到bundle.js文件中：

webpack demo.js -o bundle.js

再在demo.html结构文件中引入打包后的bundle.js文件。

<script src="./bundle.js"></script>

打开demo.html文件，查看控制台，操做成功的话会打印出：6 2

 

3.为了更方便管理项目，除了在全局安装webpack之外有必要在当前项目的工做区间上安装一个局部的webpack，一是可能全局的webpack的版本可能与全局的版本不一样，而是能够更好的管理插件。

//下载安装局部的webpack----(--save-dev能够简写成-D)
cnpm install webpack --save-dev

下载安装完成之后在工做区间下能够看到生成了一个node_modules文件夹，还有生成一个package.json文件。node_nodules文件夹里面是webpack依赖的包，package.json则是记录当前工做区间都安装了哪些包，第一次安装在这个文件里只记录了webpack的信息，如：

{
  "devDependencies": {
    "webpack": "^4.35.0"
  }
}

好比再在当前工做区间上安装一个jquery:

cnpm install jquery -D

package.json的记录多出了一个jquery的信息，实际jquery包被存到了node_modules文件夹下：

{
  "devDependencies": {
    "jquery": "^3.4.1",
    "webpack": "^4.35.0"
  }
}

这个package.json文件有什么做用呢？除了能够查看项目依赖的包之外，还有当你要迁移你的工做区间或者向同事拷贝一个正在进行开发维护的项目时，并不须要将node_modules的包拷贝给他，只须要将这个package.json文件拷贝一份便可，拿到这个package.json后在新的工做区间上执行如下指令，就能够将package.json文件中记录的全部依赖包前部下载到当前工做区间上：

npm install

 2、webpack核心概念

• 入口（entry）
• 输出（output）
• 加载器（loader）
• 插件（plugins）
• 模式（mode）
• 模块

webpack中文文档

首先，在工做区间建立一个后缀为.config.js的配置文件,这个配置文件用来配置入口、输出、加载器、插件、模块、模式。意思就是由这个配置文件告诉webpack从那个文件开始打包操做，打包到那个文件，非JS文件如何编译转码等操做，当打包JS文件时遇到须要依赖的模块时根据配置的模块信息进行打包操做，是按照开发模式仍是按照生产模式打包。这个配置文件都将为你自动完成这些操做。注意.config.js配置文件遵循Commonjs规范。

入口(entry)

 2.1.1在config.js配置文件中配置单入口文件：在配置模块中定义entry属性，而后将入口文件路径以字符串的方式传入，注意这里须要文件后缀。

module.exports = {
    entry:'./src/index.js'
}

2.1.2在config.js配置文件中配置多个入口文件：entry属性这时候就要写成对象值了，而后给每一个入口文件定义一个名称做为该对象的属性名，而后将对应的入口文件路径做为属性值给该属性。

1 module.exports = {
2     entry:{
3         index:'./src/index.js',
4         app:'./src/app.js'
5     }
6 }

输出(output)

2.2.1在config.js配置输出文件信息：在配置模块中定义output属性，并给这个属性赋值一个对象，对象中有两个属性分别是path和filename，path用来设置文件输出路径，filename用来设置文件名。

var path = require('path');
module.exports = {
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    }
}

注意path属性的配置，path.resolve(__dirname,'dist')的意思就是在path这个变量上找到当前路径下的‘dist’文件夹，若是当前文件夹下没有‘dist’文件夹就会自动建立‘dist’文件夹。path自己是一个node环境模块，因此须要引入这个模块，而后在调用path的resolve()方法获取当前模块下指定的文件夹，这个方法会返回该文件夹的绝对路径。交给webpack用来操做输出文件。

因此，这个输出的意思就是将打包好的文件存储到当前工做环境下的dist文件夹下，并设置这个打包好的文件名称为bundle.js。

2.2.2有了入口文件的的配置模式，必然输出也就须要针对这种多入口文件对应的输出多个打包文件，因此文件名确定不能像上面同样写死，看示例怎么解决的：

1 var path = require('path');
2 module.exports = {
3     output:{
4         path:path.resolve(__dirname,'dist'),
5         filename:'[name].bundle.js'
6     }
7 }

在固定的文件名称前面加上一个块[name]，设置为动态命名，这个那么就是入口文件路径对应属性名的名称。

加载器(loader)

咱们知道，less是不能直接做用在HTML文件上的，在webpack打包过程当中能够直接经过加载器将less转换成css文件，甚至直接转换编译成行间样式，这时候就须要用到加载器。固然加载器不仅是为了实现less的转换，还能处理各类不能直接被浏览器使用的文件格式的文件，好比TypeScript。

先经过转换less文件来了解加载器：

1 module.exports = {
2     module:{
3         rules:[
4             {test: /\.less$/,use:['style-loader','css-loader','less-loader']}
5         ]
6     }
7 }

在配置文件中添加对象属性module，而后在module中添加对象属性rules，而后将各类须要解析的文件以及解析这个文件格式的loader以键值对的方式添加进去。文件类型用test表示，而后再以正则表达式的方式匹配文件后缀做为test的值；use则用来表示须要的加载器，加载器的值能够是一个字符串（执行单个加载器），也能够是一个数组（多个加载器迭代加载），多个加载器迭代加载的方式是从后向前进行迭代加载。

要注意的是这些加载器是须要下载的，而后还要再主入口文件中使用模块化依赖对应文件，否则webpack没办法追踪到对应的文件。

cnpm install style-loader less-loader css-loader less --save-dev

在主入口文件中依赖对应的文件：

import './src/demo.less';

插件(plugins)

关于插件这部分不太可能在这里解释清楚，能够理解为扩展webpack的功能。其实webpack自带的加载器loader也是创建在系统的plugins基础之上的，既然是外部的扩展功能那就要先引入，而后再在配置中配置。实际上倒是是这样的，咱们经过扩展一个html-webpack-plugin插件来示范如下，这里不具体介绍这个插件的用途，后面会有具体剖析插件的博客来解析：

var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    plugins: [
        new HtmlWebpackPlugin()
    ]
}

而后我再次执行webpack打包，若是正常的完成打包的话会在dist文件夹下出现一个index.html文件，可是我在打包环节出现了如下小错误：

Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
具体在这里不解释这个错误的缘由了，我在控制台中执行了这行命令解决了这个错误：

npm link webpack --save-dev

用cnpm也是能够的，而后再次执行顺利打包，dist文件夹出现了index.html文件。

模式(mode)

2.5.1模式是用来控制打包模式的，所谓打包模式一般被称为生产模式和开发模式，二者的区别就是生产模式是压缩版本代码，不方便测试，由于若是使用压缩代码测试的话，若是出现异常状况报错都是在第一行，不方便debug。在webpack中若是没有设置模式就会默认为生产模式，打包后的代码是通过压缩的。

module.exports = {
    mode:'production'//生产模式
    mode:'development'//开发模式
}

这个代码你别两个都复制了，我是为了展现这两个模式的设置方式把两个模式都写入了示例。在实际开发时咱们通常会须要两个配置文件，一个用于开发打包，一个用于生产打包，在控制台执行打包时采用指定的配置文件打包。