webpack是什么

webpack其实就是一个JavaScript应用程序的静态模块打包器。

webpack有什么作用

模块化打包：

        webpack会将项目的资源文件当成一个一个模块，模块之间会有依赖关系，
        webpack将会对这些有依赖关系的文件进行处理，让浏览器能够识别，
        最后将应用程序需要的每个模块打包成一个或者多个bundle

安装node

-   node官网地址：<<https://nodejs.org/zh-cn/>

创建package.json文件
 
-   命令：npm init

安装webpack
 
-   本地安装：（推荐）

    npm install --save-dev webpack

    npm install --save-dev webpack-cli

-   全局安装：

    npm install --global webpack webpack-cli

打包

默认entry入口 src/index.js

默认output出口 dist/main.js
 

-   打包模式：

    webpack --mode development

    webpack --mode production

-   Package.json文件下添加scripts !

设置好后在命令行程序中运行npm run dev或者npm run build来进行打包。

webpack核心配置config文件的初使用

新建一个webpack.config.js
配置入口entry(所需打包的文件路径)
配置出口output （1）path指文件打包后的存放路径
（2）path.resolve()方法将路径或路径片段的序列处理成绝对路径
（3）__dirname 表示当前文件所在的目录的绝对路径
（4）filename是打包后文件的名称\
命令行程序运行npm run dev或者npm run build

webpack常用配置之入口entry和出口output的进阶用法

简介：讲解入口和出口的多文件用法

入口entry
- 单入口
  - 单文件
    例如： entry：‘./src/index.js’
  - 多文件
    在你想要多个依赖文件一起注入，并且将它们的依赖导向到一个“chunk”时，传入数组的方式就很有用
    例如：entry:[‘./src/index.js’,‘./src/index1.js’]
- 多入口
  例如：

entry:{
        pageone:"./...",
        pagetwo:"./...",
        pagethree:"./..."
      }

出口output

-   单出口

output:{
    path:path.resolve(_dirname,'dist'),
    filename:'bundle.js'
}

-   多出口

output:{
    path:path.resolve(_dirname,'dist'),
    filename:'[name].js'
}

开发调试必备配置

本地服务器webpack-dev-server的搭建

了解webpack-dev-server

webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务。

webpack-dev-server 主要提供两个功能：

（1）为静态文件提供服务

（2）自动刷新和热替换(HMR)
安装webpack-dev-server

npm install --save-dev webpack-dev-server

配置webpack.config.js文件
配置package.json

    "scripts": {
        "start": "webpack-dev-server --mode development"
    }

在build文件夹下新建index.html文件，在html中引入main.js

在命令行程序运行npm run start

自动弹出页面，控制台有输出信息

webpack加载css所需loader及其使用方式

了解loader
- loader让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
安装loader
- 安装style-loader和css-loader
  
  下载：
  
  npm install style-loader css-loader --save-dev
配置loader
- 在webpack.config.js文件里配置module中的rules
  
  在 webpack 的配置中 loader 有两个目标：
  1. test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
  2. use 属性，表示进行转换时，应该使用哪个 loader。