webpack4.0从入门到入门（02-2常用loader）

样式文件的处理

css-loader

分析css文件的依赖关系，合并css（支持@import url()）

style-loader

将css插入HTML中

   {
      test:/\.scss$/,
           use:["style-loader",{
               loader:"css-loader",
               options: {
                   importLoaders: 2, 
               },
           },"postcss-loader","sass-loader"]//注意顺讯
       }

名称	默认值	描述
modules	false	启用/禁用 CSS 模块
importLoaders	0	前应用的 loader 的数量（在css-loader之前还要运行多少loader）

sass-loader

没什么好说的 处理sass文件

less-loader

处理sass文件

postcss-loader

使用autoprefixer增加厂商前缀在这里插入代码片

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"]
      }
    ]
  }
}

And create a postcss.config.js with:

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

浏览器列表配置一下（ 保证能显示前缀）

"browserslist": [
    "iOS >= 6",
    "Android >= 4",
    "IE >= 9"
  ],

配置ES6

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

module: {
  rules: [
    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
  ]
}

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

{
  "presets": ["@babel/preset-env"]
}

babel-loader 负责解析规则
babel-core 核心库
babel/preset-env 翻译ES6
polyfill 可以使用新的内置函数，如Promise或WeakMap，静态方法如Array.from或Object.assign
在js中直接引入

import "@babel/polyfill";

会造成打包体积过大

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage"
      }
    ]
  ]
}

使用useBuiltIns可以节省打包体积（不用再在js中引入@babel/polyfill）（应该会造成全局污染）

npm install --save-dev @babel/plugin-transform-runtime

{
  "plugins": ["@babel/plugin-transform-runtime"]
}

默认配置

{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "absoluteRuntime": false,
        "corejs": false,
        "helpers": true,
        "regenerator": true,
        "useESModules": false,
        "version": "7.0.0-beta.0"
      }
    ]
  ]
}

corejs 选项 选项	安装命令
false	npm install --save @babel/runtime
2	npm install --save @babel/runtime-corejs2
3	npm install --save @babel/runtime-corejs3

corejs: 2仅支持全局变量（例如Promise）和静态属性（例如Array.from），corejs: 3还支持实例属性（例如[].includes）

插件

插件就是在webpack的指定时间去做只能定的操作，类似于生命周期

html-webpck-plugin（生成html文件，自动引入js）

html-webpck-plugin文档

通常使用的参数 template

plugins:[
    new HtmlWebpackPlugin({
      template:"./src/index.html"
    })
  ]

clean-webpack-plugin

clean-webpack-plugin文档

Entry Output

配置多入口

{
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
}

配置cdn

output: {
  path: "/home/proj/cdn/assets/[hash]",
  publicPath: "http://cdn.example.com"
}

sourcemap

映射打包过后的文件和源文件
iniline 不生成sourcemap
cheap 只关注业务代码和行
module 关注第三方包，loaders
开发：
cheap-module-eval-source-map
生产
cheap-moudle-source-map

开发相关

使用观察模式

"scripts": {
      "watch": "webpack --watch",
      "build": "webpack"
    },

运行npm run watch
不要使用cleanwebpackplugin
使用webpack-dev-server
安装

cnpm install --save-dev webpack-dev-server

配置webpack.config.js

const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const CleanWebpackPlugin = require('clean-webpack-plugin');

  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
    devtool: 'inline-source-map',
+   devServer: {
+     contentBase: './dist'
+   },
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Development'
      })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

添加 package.json

{
    "name": "development",
    "version": "1.0.0",
    "description": "",
    "main": "webpack.config.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "watch": "webpack --watch",
+     "start": "webpack-dev-server --open",
      "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "clean-webpack-plugin": "^0.1.16",
      "css-loader": "^0.28.4",
      "csv-loader": "^2.1.1",
      "file-loader": "^0.11.2",
      "html-webpack-plugin": "^2.29.0",
      "style-loader": "^0.18.2",
      "webpack": "^3.0.0",
      "xml-loader": "^1.2.1"
    }
  }

HMR
允许运行时更新各个模块，而是全局刷新

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin")
const {CleanWebpackPlugin} = require("clean-webpack-plugin")
+ const webpack = require("webpack")
module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].js",
  },
  mode: "development",
  devServer:{
    contentBase:'./dist',
 +   hot:true,
    // hotOnly:true
  },
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 200,
              name: "img/[name]_[hash:5].[ext]",
            },
          },
        ],
      },
      {
        test: /\.css$/,
        use: ["style-loader", {
          loader: "css-loader", // 将 CSS 转化成 CommonJS 模块
          // options:{
          //   importLoaders:1
          // }
          options: {
            importLoaders: 1 // 0 => 无 loader(默认); 1 => postcss-loader; 2 => postcss-loader, sass-loader
          }
      },"postcss-loader"],
      },
      {
        test: /\.scss$/,
        use: [{
            loader: "style-loader" // 将 JS 字符串生成为 style 节点
        }, {
            loader: "css-loader", // 将 CSS 转化成 CommonJS 模块
            options: {
              importLoaders: 2 // 0 => 无 loader(默认); 1 => postcss-loader; 2 => postcss-loader, sass-loader
            }
        }, {
            loader: "sass-loader" // 将 Sass 编译成 CSS
        },"postcss-loader"]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: {
          loader: "file-loader",
          options: {
            name: "font/[name].[ext]",
          }
        },     
      },
    ],
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:"./src/index.html"
    }),
 +  new webpack.HotModuleReplacementPlugin()
    // new CleanWebpackPlugin()
  ]
};

js 中需要额外处理（css-loader，vue-loader帮助我们底层实现）

if(module.hot){
    module.hot.accept("./aside.js",()=>{//如果启用HMR，当./aside.js发生变化
        document.getElementById("app").removeChild(document.getElementById("btn"))
        console.log(123)
        new Aside()
    })

}