webpackwebpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)，分

什么是webpack

webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

webpack安装

注意：请先安装node环境

建议大家这样操作(随时切换镜像源)：

npm install nrm -g // 安装nrm
nrm ls // 查看镜像源
nrm use taobao // 选择淘宝镜像，也可以选择cnpm
npm install webpack webpack-cli -g

使用webpack

01-webpack：

使用命令：webpack 输入文件路径 将一个文件打包成另外一个文件默认情况下会在当前目录下创建dist文件夹并将指定的源文件打包转换为main.js文件

02-webpack-config：

配置webpack.config.js:文件不要随意运行webpack

var path = require('path')
module.exports = {
  // 入口文件配置
  entry: "./src/app.js",
  
  // 出口文件配置项
  output: {
    // 输出的路径，webpack2起就规定必须是绝对路径
    path: path.join(__dirname, 'dist'),
    // 输出文件名字
    filename: "bundle.js"
  }
}

03-webpack-dev-server：能够自动打开浏览器，对于代码的修改能够自动刷新

运行：npm init -y
运行：npm i webpack-dev-server -g

var path = require('path')

module.exports = {
    // 设置文件的入口：一开始就解析这个文件
    entry:'./src/app.js',
    // 将入口文件解析为目标文件的配置
    output:{
        // 目标文件的输出路径文件夹名称
        path:path.join(__dirname,"dist"),
		//老版本会使用publicPath来实现添加公共路径的配置
        // publicPath: '/dist',
        // 目标文件的文件名称
        filename:'main.js'
    },
    // 建议使用这个配置，新版本建议这样配置,默认会生成main.js
    devServer:{
        publicPath: '/dist'
    }
}

运行 webpack-dev-server --open.--open可以自动的打开浏览器

04-webpack-css:

下载：npm install css-loader style-loader --save-dev
- css-loader：css解析器，将css解析为浏览器可以识别的类型
- style-loader：自动的在指定文件中添加style标签，同时添加指定的样式代码
在webpack.config.js文件中添加配置

// 下面这个成员就是不同类型的文件的解析加载规则
module: {
    rules: [
        // 配置的是用来解析.css文件的loader(style-loader和css-loader)
        {
            // 1.0 用正则匹配当前访问的文件的后缀名是  .css
            test: /\.css$/,
            use: ['style-loader', 'css-loader'] //webpack底层调用这些包的顺序是从右到左
        }
    ]
}

05-webpack-less&webpack-sass：

npm install less less-loader sass-loader node-sass --save-dev

less less-loader：添加对less的处理支持
sass-loader node-sass：添加对scss的处理支持

{
    test: /\.less$/,
    use: [{
        loader: 'style-loader'
    }, {
        loader: 'css-loader'
    }, {
        loader: 'less-loader'
    }]
},

{
    test: /\.scss$/,
    use: [{
        loader: 'style-loader'
    }, {
        loader: 'css-loader'
    }, {
        loader: 'sass-loader'
    }]
}

06-webpack-图片&字体：

npm install file-loader url-loader --save-dev

url-loader封装了file-loader

可以添加对图片资源或者图标资源的支持

07-webpack-babel

一些老版的浏览器可能不支持ES6，这个babel的作用就是能够将ES6转换ES5，达到兼容的目的

npm install babel-loader @babel/core @babel/preset-env --save-dev

注意：

webpack 1.x | babel-loader <= 6.x

webpack 2.x | babel-loader >= 7.x (推荐) (^6.2.10 也能用, 但是会出现不推荐使用的警告)

webpack 3.x | babel-loader >= 7.1

 {
      test: /\.js$/,
      // Webpack2建议尽量避免exclude，更倾向于使用include
      // exclude: /(node_modules)/, // node_modules下面的.js文件会被排除
      include: [path.resolve(__dirname, 'src')],
      use: {
        loader: 'babel-loader',
        // options里面的东西可以放到.babelrc文件中去
        options: {
            presets: ['@babel/preset-env']
          }
      }
    }

// .babelrc文件内的配置
{
  "presets":['@babel/preset-env']
}

08-html-webpack-plugin

主要作用：

为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题
可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口

使用过程：

下载：npm i webpack webpack-cli -S:它要求使用非全局的webpack
下载：npm install --save-dev html-webpack-plugin
在webpack.config.js文件中添加配置

const htmlWebpackPlugin = require('html-webpack-plugin');
----------------------------------------------------------
plugins: [
    new htmlWebpackPlugin({
        // template:'index.html',
        filenmae: 'index.html'
    })
]

注释掉devServer的配置，不然会冲突

补充说明：常见配置
- title：生成的html文档的标题。配置该项，它并不会替换指定模板文件中的title元素的内容，除非html模板文件中使用了模板引擎语法来获取该配置项值，可以在html页面中的title位置添加如下替换：<%= htmlWebpackPlugin.options.title %>
- filename：输出文件的文件名称，默认为index.html，不配置就是该文件名
- template：本地模板文件的位置，支持加载器(如handlebars、ejs、undersore、html等)，如果没有指定，那么就会自动的创建
- inject：向template或者templateContent中注入所有静态资源，不同的配置值注入的位置不经相同
  - true或者body：所有JavaScript资源插入到body元素的底部
  - head: 所有JavaScript资源插入到head元素中
  - false：所有静态资源css和JavaScript都不会注入到模板文件中
- favicon: 添加特定favicon路径到输出的html文档中