webpack入门

初始化 webpack

npm init -y
npm i webpack webpack-cli -D

新建 webpack.config.js 文件，配置如下：

let path = require('path')   // 相对路径变绝对路径

module.exports = {
  mode: 'production',        // 模式 默认 production development
  entry: './src/index',      // 入口
  output: {
    filename: 'bundle.[hash:8].js',   // hash: 8只显示8位
    path: path.resolve(__dirname, 'dist'),
    publicPath: ''        // 给所有打包文件引入时加前缀，包括css，js，img，如果只想处理图片可以单独在url-loader配置中加publicPath
  }
}

配置本地服务（热更新）

npm i html-webpack-plugin -D

devServer: {
  port: 3000,
  progress: true          // 滚动条
  contentBase: './build'  // 起服务的地址
  open: true              // 自动打开浏览器
  compress： true         // gzip压缩
}

打包HTML

npm i html-webpack-plugin -D

let HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [                         // 放着所有webpack插件
  new HtmlWebpackPlugin({          // 用于使用模板打包时生成index.html文件，并且在run dev时会将模板文件也打包到内存中
    template: './index.html',      // 模板文件
    filename: 'index.html',        // 打包后生成文件
    hash: true,                    // 添加hash值解决缓存问题
    minify: {                      // 对打包的html模板进行压缩
      removeAttributeQuotes: true, // 删除属性双引号
      collapseWhitespace: true     // 折叠空行变成一行
    }
  })
]

处理 CSS 和 Sass

1. 安装 css-loader 、 style-loader
2. 处理scss 安装 node-sass 、 sass-loader
3. 抽离css,通过 link 引入， 安装 mini-css-extract-plugin
4. 给css加上兼容浏览器的前缀 安装 postcss-loader 、 autoprefixer ,配置 postcss.config.js文件

npm i css-loader style-loader -D
npm i node-sass sass-loader -D
npm i mini-css-extract-plugin -D
npm i postcss-loader autoprefixer -D

postcss.config1.js:

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

let MiniCssExtractPlugin = require('mini-css-extract-plugin')

plugins: [
  new MiniCssExtractPlugin({
      filename: 'css/main.css'
  })
]


// css-loader   作用：用来解析@import这种语法
// style-loader 作用：把 css 插入到head标签中
// loader的执行顺序： 默认是从右向左（从下向上）
module: {    // 模块
  rules: [   // 规则
    // style-loader 把css插入head标签中
    // loader 功能单一
    // 多个loader 需要 []
    // 顺便默认从右到左
    // 也可以写成对象方式
    {
      test: /\.(css|scss)$/,   // css scss处理
      <!-- use: 'css-loader'
      use: ['style-loader', 'css-loader'], -->   //不采用这种写法
      use: [
        <!-- 'style-loader',    // 将css标签插入最顶头  这样可以自定义style不被覆盖 -->
        MiniCssExtractPlugin.loader,   //使用插件抽离之后，就不需要 'style-loader'了
        'css-loader',      // css-loader 用来解析@import这种语法,
        'postcss-loader',
        'sass-loader'
      ]
    }
  ]
}

压缩 CSS 和 JS

npm i optimize-css-assets-webpack-plugin -D
npm i uglifyjs-webpack-plugin -D

module.exports = {
  optimization: {              // 优化项
    minimizer: [
      new UglifyJsPlugin({     // 优化js
        cache: true,           // 是否缓存
        parallel: true,        // 是否并发打包
        // sourceMap: true     // 源码映射 set to true if you want JS source maps
      }),
      new OptimizeCSSAssetsPlugin({})    // css 的优化
    ]
  },
  mode: 'production',
  entry: '',
  output: {},
}

安装 babel

npm i babel-loader @babel/core @babel/preset-env -D

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [ //预设
              '@babel/preset-env' 
            ],
            plugins:[
              // 转es7的语法
              ["@babel/plugin-proposal-decorators", { "legacy": true }],
              ["@babel/plugin-proposal-class-properties", { "loose" : true }]
            ]
          }
        },
        exclude: /node_modules/   //排除  node_modules
      }
    ]
  }
}

如需要转换 ES7 的语法，需要安装 @babel/plugin-proposal-class-properties 、 @babel/plugin-proposal-decorators

// 转class
npm i @babel/plugin-proposal-class-properties -D
// 转装饰器
npm i @babel/plugin-proposal-decorators -D

配置如上

其他不兼容的高级语法

使用 @babel/polyfill

webpack图片打包

npm i url-loader -D

{
  test: /\.(png|jpg|gif)$/,
  // 当图片小于多少，用base64,否则用file-loader产生真实的图片
  use: {
    loader: 'url-loader',
    options: {
      limit: 200 * 1024,          // 小于200k变成base64
      // outputPath: '/img/',     // 打包后输出地址
      // publicPath: ''           // 给资源加上域名路径
    }
  }
}

配置source-map

module.exports = {
devtool: ‘source-map’ // 增加映射文件调试源代码
}

源码映射 会标识错误的代码 打包后生成独立的文件 大而全 「source-map」
不会陈胜单独的文件 但是可以显示行和列 「eval-source-map」
不会产生列有行，产生单独的映射文件 「cheap-module-source-map」
不会产生文件 集成在打包后的文件中 不会产生列有行 「cheap-module-eval-source-map」

watch 改完代表重新打包实体

module.exports = {
  watch: true,
  watchOptions: {
    poll: 1000,              // 每秒监听1000次
    aggregateTimeout: 300,   // 防抖，当第一个文件更改，会在重新构建前增加延迟
    ignored: /node_modules/  // 对于某些系统，监听大量文件系统会导致大量的 CPU 或内存占用。这个选项可以排除一些巨大的文件夹，
  },
}