zoukankan      html  css  js  c++  java
  • webpack4强势来袭

    # Webpack4
    ## 安装
    > webpack 4默认不需要配置文件(它吸收了Parcel的思想,零配置)
    > - npm i -D webpack
    > - npm i -D webpack-cli
    ## 使用
    1.入口点/输出文件
    ```
    //package.json
    "scripts": {
    "build1": "webpack"
    }
    //cmd
    npm run build1
    //报错: ERROR in Entry module not found: Error: Can't resolve './src' in '~/webpack-4-quickstart'
    ```
    说明webpack4正在寻找./src中的入口点(入口点是webpack寻找开始构建Javascript包的文件)

    **webpack 4中,不需要定义入口点和输出文件**

    **webpack 4将./src/index.js作为默认入口点。 而且,它会在./dist/main.js中吐出这个包**

    2.生产模式和开发模式
    **webpack4无需任何配置文件**
    **只需定义--mode标记,即可免费获得一切**
    ```
    "scripts": {
    "dev":"webpack --mode development",
    "build":"webpack --mode production"
    }
    ```
    > webpack1/2/3一般拥有2个配置文件
    > - 开发配置文件: 用于定义webpack dev服务器和其他东西
    > - 生产配置文件: 用于定义UglifyJSPlugin和sourcemaps等

    ## 更多特性
    > - sideEffects 设置 —— 在打包体积上巨大的胜利
    > - 支持 JSON 和 Tree Shaking
    > - 升级到 UglifyJS2
    > - 模块类型的引入 + 支持 .mjs
    > - javascript/auto: (在 webpack 3 默认启用) 启用了所有的 Javascript 模块系统:CommonJS,AMD,ESM
    > - javascript/esm: EcmaScript 模块,所有的其他模块系统不可用(默认 .mjs 文件)
    > - javascript/dynamic: 只有 CommonJS 和,EcmaScript 模块不可用
    > - json: JSON 数据,它可以通过 require 和 import 来引入使用(默认 .json 的文件)
    > - webassembly/experimental: WebAssembly模块(当前为 .wasm 文件的实验文件和默认文件)
    > - 另外 webpack 现在支持查找 .wasm, .mjs, .js 和 .json 拓展文件来解析
    > - 支持 WebAssembly
    > - 去除 CommonsChunkPlugin

  • 相关阅读:
    Mac OS X下GnuPlot的安装
    为PHP编译imap扩展
    jQuery做个TextBox自动完成条
    sql 查询模块
    WinForm控件查找奇思
    支持拼音检索的TextBox扩展控件使用
    自定义控件重写Listbox实现item图标变换和item点击事件
    支持拼音检索的TextBox扩展控件
    (转)SendMessage API
    使用C#获取CPU及硬盘序列号的源代码
  • 原文地址:https://www.cnblogs.com/xfz1987/p/8473719.html
Copyright © 2011-2022 走看看