1、相识Webpack相干

• 什么是webpack

  • Webpack是一个模块打包器(bundler)。
  • 在Webpack看来, 前端的一切资本文件(js/json/css/img/less/…)都邑作为模块处置惩罚
  • 它将依据模块的依靠关联举行静态剖析，天生对应的静态资本

• 五个中心观点

  • Entry：进口出发点(entry point)指导 webpack 应当运用哪一个模块，来作为构建其内部依靠图的最先。
  • Output：output 属性通知 webpack 在那里输出它所建立的 bundles，以及怎样定名这些文件，默许值为 ./dist。
  • Loader：loader 让 webpack 能够去处置惩罚那些非 JavaScript 文件（webpack 自身只能剖析 JavaScript）。
  • Plugins：插件则能够用于实行局限更广的使命。插件的局限包含，从打包优化和紧缩，一直到从新定义环境中的变量等。
  • Mode：形式，有临盆形式production和开辟形式development

• 明白Loader

  • Webpack 自身只能加载JS/JSON模块，假如要加载其他范例的文件(模块)，就须要运用对应的loader 举行转换/加载
  • Loader 自身也是运转在 node.js 环境中的 JavaScript 模块
  • 它自身是一个函数，接收源文件作为参数，返回转换的结果
  • loader 平常以 xxx-loader 的体式格局定名，xxx 代表了这个 loader 要做的转换功用，比方 json-loader。

• 明白Plugins

  • 插件能够完成一些loader不能完成的功用。
  • 插件的运用平常是在 webpack 的设置信息 plugins 选项中指定。

• 设置文件(默许)

  • webpack.config.js : 是一个node模块，返回一个 json 花样的设置信息对象

2、开启项目

• 初始化项目：

  • 天生package.json文件

    {
      "name": "webpack_test",
      "version": "1.0.0"
    } 

• 装置webpack

  • npm install webpack webpack-cli -g //全局装置
  • npm install webpack webpack-cli -D //当地装置

3、编译打包运用

• 建立js文件

  • src/js/app.js
  • src/js/module1.js
  • src/js/module2.js
  • src/js/module3.js

• 建立json文件

  • src/json/data.json

• 建立主页面:

  • src/index.html

• 运转指令

  • 开辟设置指令：webpack src/js/app.js -o dist/js/app.js –mode=development

    • 功用: webpack能够编译打包js和json文件，而且能将es6的模块化语法转换成浏览器能辨认的语法

  • 临盆设置指令：webpack src/js/app.js -o dist/js/app.js –mode=production

    • 功用: 在开辟设置功用上加上一个紧缩代码

• 结论：

  • webpack能够编译打包js和json文件
  • 能将es6的模块化语法转换成浏览器能辨认的语法
  • 能紧缩代码

• 瑕玷：

  • 不能编译打包css、img等文件
  • 不能将js的es6基础语法转化为es5以下语法
• 改良：运用webpack设置文件处理，自定义功用

4、运用webpack设置文件

• 目标：在项目根目次定义设置文件，经由过程自定义设置文件，复原以上功用
• 文件名称：webpack.config.js

• 文件内容：

  const {resolve} = require('path'); //node内置中心模块，用来设置途径。
  module.exports = {
    entry: './src/js/app.js',   // 进口文件
    output: {                     // 输出设置
      filename: './js/bundle.js',      // 输出文件名
      path: resolve(__dirname, 'dist')   //输出文件途径设置
    },
    mode: 'development'   //开辟环境(二选一)
    mode: 'production'   //临盆环境(二选一)
  };

• 运转指令： webpack

5、js语法搜检

• 装置loader

  • npm install eslint-loader eslint –save-dev

• 设置loader

  module: {
    rules: [
      {
        test: /\.js$/,  //只检测js文件
        exclude: /node_modules/,  //消除node_modules文件夹
        enforce: "pre",  //提早加载运用
        use: { //运用eslint-loader剖析
          loader: "eslint-loader" 
        }
      }        
    ]
  }

• 修正package.json（须要删除解释才见效）

  "eslintConfig": {   //eslint设置
    "parserOptions": {  
      "ecmaVersion": 8,  // es8
      "sourceType": "module", //  ECMAScript 模块
    }
  }

• 运转指令：webpack

6、js语法转换

• 装置loader

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

• 设置loader

  module: {
    rules: [
      {
        oneOf: [  //数组中的设置只要一个能够见效, 背面的设置都邑放在当前数组中
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
              loader: "babel-loader",
              options: {
                presets: ['@babel/preset-env']
              }
            }
          }
        ]
      }
    ]
  }

• 运转指令：webpack

7、打包less资本

• 建立less文件

  • src/less/test1.less
  • src/less/test2.less

• 进口app.js文件

  • 引入less资本

• 装置loader

  • npm install css-loader style-loader less-loader less –save-dev

• 设置loader

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

• 运转指令：webpack
• 在index.html中引入打包天生的dist/js/bundle.js文件,视察结果

8、打包款式文件中的图片资本

• 增加2张图片:

  • 小图, 小于8kb: src/images/1.png
  • 大图, 大于8kb: src/images/2.jpg
• 在less文件中经由过程背景图的体式格局引入图片

• 装置loader

  • npm install file-loader url-loader –save-dev
  • 补充：url-loader是对象file-loader的上层封装，运用时需合营file-loader运用。

• 设置loader

  {
    test: /\.(png|jpg|gif|svg)$/,
    use: [
      {
        loader: 'url-loader',
        options: {
          outputPath: 'images/',   //在output基础上，修正输出图片文件的位置
          publicPath: '../dist/images/',  //修正背景图引入url的途径
          limit: 8 * 1024,  // 8kb大小以下的图片文件都用base64处置惩罚
          name: '[hash:8].[ext]'  // hash值为7位，ext自动补全文件扩展名
        }
      }
    ]
  }

• 运转指令：webpack
• 在index.html中引入打包天生的dist/js/bundle.js文件,视察结果

9、打包html文件

• 增加html文件

  • src/index.html
  • 注重不要在html中引入任何css和js文件

• 装置插件Plugins

  • npm install clean-webpack-plugin –save-dev

• 在webpack.config.js中引入插件（插件都须要手动引入，而loader会自动加载）

  • const CleanWebpackPlugin = require(‘clean-webpack-plugin’)

• 设置插件Plugins

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

• 运转指令：webpack

10、打包html中图片资本

• 增加图片

  • 在src/index.html增加两个img标签

• 装置loader

  • npm install html-loader –save-dev

• 修正entry

  • entry: [‘./src/js/app.js’, ‘./src/index.html’]

• 设置loader

  {
    test: /\.(html)$/,
    use: {
      loader: 'html-loader'
    }
  }

• 运转指令：webpack

11、打包其他资本

• 增加字体文件

  • src/media/iconfont.eot
  • src/media/iconfont.svg
  • src/media/iconfont.ttf
  • src/media/iconfont.woff
  • src/media/iconfont.woff2

• 修正款式

  @font-face {
    font-family: 'iconfont';
    src: url('../media/iconfont.eot');
    src: url('../media/iconfont.eot?#iefix') format('embedded-opentype'),
    url('../media/iconfont.woff2') format('woff2'),
    url('../media/iconfont.woff') format('woff'),
    url('../media/iconfont.ttf') format('truetype'),
    url('../media/iconfont.svg#iconfont') format('svg');
  }
  
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

• 修正html，增加字体

• 设置loader

  {
    loader: 'file-loader',
    exclude: [/\.js$/, /\.html$/, /\.json$/],
    options: {
      outputPath: 'media/',
      publicPath: '../dist/media/',
      name: '[hash:8].[ext]',
    },
  }

• 运转指令：webpack

12、自动编译打包运转

• 装置loader

  • npm install webpack-dev-server –save-dev

• 引入webpack

  • const webpack = require(‘webpack’);

• 修正webpack设置对象（注重不是loader中）

  devtool: 'inline-source-map',  // 将编译后的代码映射回原始源代码，更容易地追踪毛病和正告
  devServer: {
    contentBase: './dist',  //项目根途径
    hot: true,  //开启热模替代功用
    open: true  //自动翻开浏览器
  },
  plugins: [
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ]

• 修正loader部份设置

  • 由于构建东西以dist为根目次，不必再找dist了
  • publicPath: '../dist/images/' –> publicPath: 'images/'
  • publicPath: '../dist/media/' –> publicPath: 'media/'

• 修正package.json中scripts指令

  • “start”: “webpack-dev-server”,
  • “dev”: “webpack-dev-server”
• 运转指令：npm start / npm run dev

以上就是webpack开辟环境的设置，能够在内存中自动打包一切范例文件并有自动编译运转、热更新等功用。

13、预备临盆环境

• 建立文件夹config，将webpack.config.js复制两份

  • webpack.dev.js
  • webpack.prod.js

• 修正webpack.prod.js设置，删除webpack-dev-server设置

  module.exports = {
    output: {
      filename: 'js/[name].[hash:8].js',   //增加了hash值, 完成静态资本的历久缓存
      publicPath: '/'  //一切输出资本大众途径
    },
    module: {  //loader其他没有变化，只放了变化部份，只要须要修正途径部份改了
      rules: [
        {
          oneOf: [
            {
              test: /\.(png|jpg|gif|svg)$/,
              use: [
                {
                  loader: 'url-loader',
                  options: {
                    limit: 8 * 1024,  // 8kb大小以下的图片文件都用base64处置惩罚
                    name: 'images/[name].[hash:8].[ext]'
                  }
                }
              ]
            },
            {
              loader: 'file-loader',
              exclude: [/\.js$/, /\.html$/, /\.json$/],
              options: {
                name: 'media/[name].[hash:8].[ext]',
              },
            }
          ]
        }
      ]
    },
    mode: 'production',  //修正为临盆环境
  }

• 修正package.json的指令

  • “start”: “webpack-dev-server –config ./config/webpack.dev.js”
  • “dev”: “webpack-dev-server –config ./config/webpack.dev.js”
  • “build”: “webpack –config ./config/webpack.prod.js”

• 开辟环境指令

  • npm start
  • npm run dev

• 临盆环境指令

  • npm run build

  • 注重: 临盆环境代码须要布置到服务器上才运转

    • npm i serve -g
    • serve -s dist

14、消灭打包文件目次

• 装置插件

  • npm install clean-webpack-plugin –save-dev

• 引入插件

  • const CleanWebpackPlugin = require(‘clean-webpack-plugin’);

• 设置插件

  new CleanWebpackPlugin()

• 运转指令：npm run build

15、提取css成零丁文件

• 装置插件

  • npm install mini-css-extract-plugin –save-dev

• 引入插件

  • const MiniCssExtractPlugin = require(“mini-css-extract-plugin”);

• 设置loader

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

• 设置插件

  new MiniCssExtractPlugin({
    filename: "css/[name].[hash:8].css",
    chunkFilename: "css/[id].[hash:8].css"
  })

• 运转指令

  • npm run build
  • serve -s dist

16、增加css兼容

• 装置loader

  • npm install postcss-loader autoprefixer –save-dev

• 设置loader

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

• 在项目根目次增加postcss设置文件：postcss.config.js

  module.exports = {
    "plugins": {
      "autoprefixer": {
        "browsers": [
          "ie >= 8",
          "ff >= 30",
          "chrome >= 34",
          "safari >= 8",
          "opera >= 23"
        ]
      }
    }
  }

• 运转指令：

  • npm run build
  • serve -s dist

17、紧缩css

• 装置插件

  • npm install optimize-css-assets-webpack-plugin –save-dev

• 引入插件

  • const OptimizeCssAssetsPlugin = require(‘optimize-css-assets-webpack-plugin’);

• 设置插件

  new OptimizeCssAssetsPlugin({
    cssProcessorPluginOptions: {
      preset: ['default', { discardComments: { removeAll: true } }],
    },
  })

• 运转指令：

  • npm run build
  • serve -s dist

18、图片紧缩

• 装置loader

  • npm install img-loader imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo imagemin –save-dev

• 设置loader

  {
    test: /\.(png|jpg|gif|svg)$/,
    use: [
      {
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,  // 8kb大小以下的图片文件都用base64处置惩罚
          name: 'images/[name].[hash:8].[ext]'
        }
      },
      {
        loader: 'img-loader',
        options: {
          plugins: [
            require('imagemin-gifsicle')({
              interlaced: false
            }),
            require('imagemin-mozjpeg')({
              progressive: true,
              arithmetic: false
            }),
            require('imagemin-pngquant')({
              floyd: 0.5,
              speed: 2
            }),
            require('imagemin-svgo')({
              plugins: [
                { removeTitle: true },
                { convertPathData: false }
              ]
            })
          ]
        }
      }
    ]
  }

• 运转指令：

  • npm run build
  • serve -s dist

19、紧缩html

• 修正插件设置

  new HtmlWebpackPlugin({
    template: './src/index.html',
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeRedundantAttributes: true,
      useShortDoctype: true,
      removeEmptyAttributes: true,
      removeStyleLinkTypeAttributes: true,
      keepClosingSlash: true,
      minifyJS: true,
      minifyCSS: true,
      minifyURLs: true,
    }
  })

• 运转指令：

  • npm run build
  • serve -s dist

以上就是webpack临盆环境的设置，能够天生打包后的文件。

到这里基础设置已告一段落了，一切设置我已放在 堆栈 中

第二期 Webpack4优化教程 已出~ 迎接关注和发问~