• 聊聊webpack 4


    前言

    hello,小伙伴们,本篇仓库出至于我的GitHub仓库 web-study ,如果你觉得对你有帮助的话欢迎star,你们的点赞是我持续更新的动力

    web-study

    webpack 打包工具

    webpack 毫无疑问现在是非常火热的前端自动化打包工具,本系列教程是基于最新版 webpack 4.X.X 来编写。

    webpack 4:零配置开始

    1. 创建一个目录然后进入,初始化生成 package.json 文件
    md webpack-4-quickstart
    
    cd webpack-4-quickstart
    
    npm init -y
    
    1. 安装 webpack4webpack-cli
    npm install webpack webpack-cli --save-dev
    
    1. 打开 package.json 添加构建脚本:
    "scripts": {
      "build": "webpack"
    }
    
    1. 创建入口文件: index.jswebpack4 默认入口文件为/src/index.js
    console.log('hello world!')
    
    1. 打包构建
    npm run build
    

    你会在 ~/webpack-4-quickstart/dist/main.js 得到你打包后的文件。

    Webpack 4: 生产和开发模式

    创建 webpack.config.js webpack 配置文件,webpack 4 介绍了生产( production) 和开发( development) 两种模式,需要通过 mode 属性指定。

    webpack.config.js 文件中指定mode 属性为 development,再次打包文件。(npm run build)。

    可以看到main.js文件中的代码没被压缩,哈哈,这就是 webpack 的厉害之处,可以分模式开发。

    webpack 4:覆盖默认的入口/出口文件

    webpack.config.js 文件中通过 entry 属性指定打包的入口文件,output属性指定打包后的出口文件。

    const path = require('path')
    module.exports = {
      mode: 'development',
      entry: './src/hello.js',
      output: {
        path: path.resolve(__dirname, 'dist'), // 这里必须指定一个绝对路径
        filename: 'hello.js'
      }
    }
    

    再次打包,就会打包 ./src/hello.js ,输出 ./dist/hello.js

    webpack 4:用 Babel 7 转译 ES6 的 js 代码

    现在大家都习惯用 ES6 写 Javascript。

    但是不是所有浏览器都知道怎么处理 ES6。我们需要做一些转换。

    这个转换的步骤叫做 transpilingtranspiling 是指把 ES6 转译成浏览器能够识别的代码。

    webpack 本身并不知道如何去转换,但是有 loaders。把他们想象成转换器。

    babel-loader 是 webpack 的一个 loader,可以把 ES6 以上的代码转译成 ES5。

    为了使用这个 loader 我们需要去安装一系列的依赖。特别是:

    • babel-core
    • babel-loader
    • babel-preset-env (for compiling Javascript ES6 code down to ES5)

    先安了吧:

    npm i babel-core babel-loader babel-preset-env --save-dev
    

    下一步我们在项目目录下建立一个 .babelrc 文件用来配置 Babel。

    {
      "presets": ["env"]
    }
    

    配置完成后通过配置文件使用 babel-loader

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

    webpack 4:HTML 插件

    webpack 需要两个额外的组件去处理 HTML:html-webpack-pluginhtml-loader

    先安装:

    npm i html-webpack-plugin html-loader --save-dev
    

    webpack 的配置 html-loader

    
    {
      test: /.html$/,
      use: [
        {
          loader: 'html-loader',
          options: { minimize: true } // 是否压缩代码
        }
      ]
    }
    
    ... 插件使用...
    plugins: [
      new HtmlWebPackPlugin({
        template: './src/index.html',
        filename: './index.html'
      })
    ]
    

    ./src/index.html 新建一个 HTML 文件(模板文件,用来给webpack打包)

    最后运行 npm run build 重新打包,查看 ./dist 目录,你会看到运行后的结果。

    没有必要在你的 HTML 文件中引入你的 JavaScript:它会自动地注入进去。

    在浏览器打开 ./dist/index.html:你可以看到最后的结果。

    webpack 4: 提取 CSS 到文件中

    mini-css-extract-plugin 插件用来提取 CSS 到文件中。

    安装它:

    npm i mini-css-extract-plugin css-loader --save-dev
    

    然后建立一个 CSS 文件用来测试:

    body {
      line-height: 2;
    }
    

    配置 loader 和 plugin:

    {
      test: /.css$/,
      use: [MiniCssExtractPlugin.loader, 'css-loader']
    }
    
    ...插件使用...
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    })
    

    最后在入口文件中引入 CSS:

    import style from './main.css'
    

    构建:

    npm run build
    

    查看 ./dist 目录,你应该能看到 CSS 的结果!

    重点回顾:extract-text-webpack-plugin 在 webpack 4 中不能用了。请使用 mini-css-extract-plugin

    webpack 4:webpack dev server

    一旦配置了 webpack dev server 它会在浏览器中加载你的 app。

    只要你改变了文件,它会自动地刷新浏览器的页面。

    安装下面的包来搭建 webpack dev server

    npm i webpack-dev-server --save-dev
    

    然后打开 package.json 调整脚本:

    "scripts": {
      "dev": "webpack-dev-server --mode development --open",
      "build": "webpack --mode production"
    }
    

    保存关闭。

    现在运行:

    npm run dev
    

    你就会看到 webpack dev server 在浏览器中加载你的应用了。

    webpack dev server 非常适合用来开发。

  • 相关阅读:
    【小白入门教程】3 分钟搞明白直播中拖动不准的问题
    如何在直播中解决黑屏、花屏、闪屏问题 | 直播疑难杂症排查
    骑兵变步兵?10 分钟搞明白如何在直播中去马赛克
    实现高性能纠删码引擎 | 纠删码技术详解(下)
    傅里叶分析之掐死教程(完整版)
    Python & 机器学习之项目实践
    LightGBM 调参方法(具体操作)
    模型调参:分步骤的提升模型的精度
    QQ的孤独
    python 机器学习中模型评估和调参
  • 原文地址:https://www.cnblogs.com/dreamcc/p/10945439.html
Copyright © 2020-2023  润新知