从零开始的Webpack4教程

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优化教程 已出~ 迎接关注和发问~

    原文作者:xpromise
    原文地址: https://segmentfault.com/a/1190000018534625
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞