Webpack处理类型资源——开发版(最详细无图片版)

npm install --save-dev webpack
npm install --save-dev webpack-cli
本地安装webpack 、webpack-cli```
--save-dev === -D
package.json配置：
"start": "npx webpack-dev-server"
"build": "webpack --config webpack.config.js"

完整版webpack开发环境配置，已上传至github仓库中，可以下载哦~

https://github.com/mrxu007/webpack-project.git

完整版webpack生产环境(上线环境)配置，已上传至github仓库中，可以下载哦~

（生产环境相对于开发环境做了优化，后期上线对照着修改即可，建议下载开发环境使用）

https://github.com/mrxu007/webpack-production-base.git

webpack实际作用是将js打包成不同模块。
webpack是由各种不同得插件进行协作，来处理不同文件。
webpack不安装任何插件的情况下，本身只支持js(es5)和json的解析

====================================================

常用plugins

plugins	作用
webpack-dev-server	本地开发服务器
clean-webpack-plugin	清除上一次打包的文件
html-webpack-plugin	处理html文件
mini-css-extract-plugin	css抽离成单独文件
eslint-import-plugin	配合eslint语法检测使用
optimize-css-assets-plugin	压缩css

====================================================

常用loader（注意哦没有-loader的都是其loader所需的依赖）

loader	作用
style-loader	创建style标签插入到html中的head标签中
css-loader	打包成css模块
less-loader less	解析less->css
stylus-loader stylus	解析stylus->css
postss-loader postcss-preset-env	css兼容处理
eslint-config-aribnb-base eslint eslint-loader	解析es6基本语法
file-loader	解析原始数据的图片/图片文字
url-loader	解析图片(超过limit条件自动切换file-loader解析图片)
html-loader	解析html文件中img标签

注明：插件详细属性设置请上npm官网进行查询

开发环境解析文件专栏

①本地开发服务器

webpack-dev-server -D 

package.json 指令配置：npx webpack-dev-server
webpack.config.js配置：
devServer: {
    contentBase: resolve(__dirname, 'dist'),//解析文件地址
    compress: true,//打开gzip压缩
    port: 8080,//端口号
  }

开发服务器devserver：
用来自动化(自动化编译，自动打开浏览器，自动刷新浏览器)
特点：只会在内存中编译打包，不会有任何输出

②清除上一次打包的文件

 clean-webpack-plugin -D

webpack.config.js配置：
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  
plugins: [//插件
  new CleanWebpackPlugin()//清楚上一个打包的文件残留
],

③处理html文件

html-webpack-plugin -D

webpack.config.js配置：
const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [//插件
 new HtmlWebpackPlugin({
   template: './src/index.html',//模板文件
   filename: 'index.html',//打包后的名字
   /**html上线优化设置(不是上线模式请不要设置)
   minify: {//压缩
    removeAttributeQuotes: true,//移除属性之间的引号
    collapseWhitespace: true,//折叠空格
   },
   hash: true//插入的js尾部生成hash戳
 })
**/
 ]

④处理css文件

style-loader css-loader -D

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

⑤处理less文件

less-loader less -D

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

⑥处理stylus文件

stylus-loader stylus -D

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

⑦处理js文件 es6 高级语法->es5

babel-loader @babel/babel-core @babel/babel-preset-env core-js -D

module:{
 rules:[
 {//es6高级语法转es5
   test: /\.js$/,
   exclude: /node_modules/,//依赖库不需要进行转换
   include: resolve(__dirname, 'src'),
   use: [
     {
       loader: 'babel-loader',
       options: {
         "presets": [
           [
             '@babel/preset-env',
             {
               //按需加载
               useBuiltIns: 'usage',
               //指定core-js版本
               corejs: {
                 version: 3
               },
               //指定兼容性做到那些版本浏览器
               targets: {
                 chrome: '60',
                 firefox: '60',
                 ie: '9',
                 safari: '10',
                 edge: '17'
               }
             }
           ] 
         ],
         //开启babel缓存
         //第二次构建时，会读取之前的缓存，提高速度
         cacheDirectory: true
       }
     }
   ]
   // {
   //   loader: 'babel-loader',
   //   options: {
   //     presets: [
   //       '@babel/preset-env'
   //     ]
   //   }
   // }
 }
 ]
}

⑧处理image图片资源

1>通过import导入的图片

bug:打包后页面显示不出css中的图片

npm i url-loader -D

{
 test: /\.(gif|png|jpeg|svg|jpg)$/,
 exclude: resolve(__dirname, 'src/font'),
 include: resolve(__dirname, 'src/images'),
 use: [
   {
     loader: 'url-loader',
     options: {
       limit: 1 * 1024,//用于base64转换，base64图片不会请求http，减少小体积图片的请求。
       //大于这个限制的图片使用依赖file-loader解析图片
       outputPath: 'images/',
       publicPath: '../../dist/images',//publicPath自己要配置清楚
       //css未抽离时图片地址是相对与index.html文件
       //css抽离后，图片地址是相对于css文件夹
       //因为打包后抽离插件的影响，css中所引用的图片相对地址发生了改变，所以要设置这项。
       //路径不固定按照自己的路径配置
       name: '[hash:8].[ext]'
     }
   }
 ]
}

2>html中的image标签图片

npm i html-laoder -D

{
  test: /\.html$/,
  use: [
    {
      loader: 'html-loader'
      //识别html文件中的img标签
    }
  ]
 }

⑨处理字体图标

归类不需要做任何处理的资源，比如打包，压缩优化等都不需要

npm i file-loader -D
{
  test: /\.(eot|svg|ttf|woff|woff2)$/,//匹配的文字类型
  exclude: resolve(__dirname,'src/images'),//排除images中相同类型的图片
  include: resolve(__dirname, 'src/font'),
  use: {
    loader: 'file-loader',
    options: {
      name: '[hash:8].[ext]',
      outputPath: 'font/'
    }
  }
 }

⑩处理引入全局变量常用的jQuery等

1>通过loader引入

expose-loader -D
	略

2>通过模块注入,给每个模块引入

	略

3>直接index.html中引入cdn的jQuery

但是要设置，不然本地的JQuery会被解析成模块，导致包变大。
(目的是让项目直接用cdn的线上jquery)

webpack.config.js配置：
  externals: {//外部的，外面的：详细说明请查找官方文档externals
    jquery: 'jQuery'//
  }

index.html模板文件引入
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>//开发环境使用
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>//上线环境使用

上线环境优化专栏(常规的一些上线优化处理，详情看优化篇)

①优化html

html优化配置：在开发环境专栏 处理html中 查找

②优化css样式

1>css抽离成单独文件

mini-css-extract-plugin -D

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module: {
 {
  test: /\.less$/,
  use: [
   // 'style-loader',该插件被抽离插件顶替处理css/stylus/sass同理
   MiniCssExtractPlugin.loader,
   'css-loader',
   'less-loader'
  ]
 },
}
plugins: [
 new MiniCssExtractPlugin({
  //对输出的css文件进行分、重命名
  //所有的filename都可以进行文件分类、hash后缀
  filename: 'css/bundle.[hash:8].css'
 })
]

2>css兼容性处理

postcss-loader postcss-preset-env -D

package.json配置：
"browserslist": {
 "development": [
   "last 1 chrome version",
   "last 1 firefox version",
   "last 1 safari version"
 ],
 "production": [
   ">0.2%",
   "not dead",
   "not op_mini all"
 ]
}

webpack.config.js配置：
module: {
 rules: [
  {
    test: /\.less$/,
    use: [
      // 'style-loader',
      MiniCssExtractPlugin.loader,
      'css-loader',
      {
        loader: 'postcss-loader',
        options: {
          ident: 'postcss',
          plugins: () => [
            require('postcss-preset-env')
            //帮助postcss-loader去找package.json文件中的browserslist兼容主流浏览器配置
          ]
        }
      },
      'less-loader'
    ]
  }		
 ]
}

3>css压缩

Optimize-css-assets-plugin -D

plugins: [//插件
 new OptimizeCssAssetsWebpackPlugin()//无需任何参数
],

③语法检测处理

eslint eslint-loader eslint-config-airbnb-base eslint-plugin-import babel-eslint -D

webpack.config.js配置：
{
  test: /\.js$/,
  exclude: /node_modules/,//排除检测node_modules文件
  include: resolve(__dirname, 'src'),//只找src下面的js文件
  use: {
    loader: 'eslint-loader',
    options: {
      enforce: 'pre',//强制这个loader比下面loader先执行，我们都知道loader从下往上，从右往左
      fix: true//强大的属性帮我们自动改正错误的格式！！
    }
  }
}

.eslintrc配置：
{
  "extends": "airbnb-base",
  "parser": "babel-eslint",//兼容import按需导入，预加载
  "env": {
    "amd": true,
    "es6": true,
    "browser": true,
    "node": false   
   },
  "rules": {
   //未定义的变量不能使用
   "no-undef": 0,
   //一行结束后面不要有空格
   "no-trailing-spaces": 1,
   //强制驼峰命名法
   "camelcase": 2,
   //不能使用console
   "no-console": "off"
  }
}