资讯专栏INFORMATION COLUMN

webpack 4.x学习使用总结

ls0609 / 2798人阅读

摘要:最近一周一直都在折腾一些项目中常用的记录下来,以后免去简单的配置再去查文档。常规入口指示应该使用哪个模块,来作为构建其内部依赖图的开始。把代码转换成,在使用语言中有介绍。扩展语法,使用下一代,在使用中有介绍。用于忽略部分文件。

最近一周一直都在折腾webpack,一些项目中常用的记录下来,以后免去简单的配置再去查文档。

常规 1.入口

指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。
三种写法:

</>复制代码

  1. entry: "./app/entry", // string | object | array
  2.  entry: ["./app/entry1", "./app/entry2"],
  3.  entry: {
  4.    a: "./app/entry-a",
  5.    b: ["./app/entry-b1", "./app/entry-b2"]
  6.  },
2.出口

output 属性告诉 webpack 在哪里输出它所创建的 bundles

</>复制代码

  1. output:{
  2.     path: path.resolve(__dirname, "dist"), // string,
  3.       
  4.     filename: "bundle.js", // string
  5.     filename: "[name].js", // 用于多个入口点(entry point)(出口点?)
  6.     filename: "[chunkhash].js", // 用于长效缓存
  7.     
  8.     publicPath: "",
  9.     publicPath: "https://cdn.example.com/",
  10. }
3. 模块

开发者将程序分解成离散功能块(discrete chunks of functionality),并称之为_模块_。

</>复制代码

  1. module:{
  2.      rules:[{
  3.        test: /.jsx?$/,
  4.        include: [
  5.          path.resolve(__dirname, "app")
  6.        ],
  7.        exclude: [
  8.          path.resolve(__dirname, "app/demo-files")
  9.        ],
  10.        // 这里是匹配条件,每个选项都接收一个正则表达式或字符串
  11.        // test 和 include 具有相同的作用,都是必须匹配选项
  12.        // exclude 是必不匹配选项(优先于 test 和 include)
  13.        // 最佳实践:
  14.        // - 只在 test 和 文件名匹配 中使用正则表达式
  15.        // - 在 include 和 exclude 中使用绝对路径数组
  16.        // - 尽量避免 exclude,更倾向于使用 include
  17.        issuer: { test, include, exclude },
  18.        // issuer 条件(导入源)
  19.        enforce: "pre",
  20.        enforce: "post",
  21.        // 标识应用这些规则,即使规则覆盖(高级选项)
  22.        loader: "babel-loader",
  23.        // 应该应用的 loader,它相对上下文解析
  24.        // 为了更清晰,`-loader` 后缀在 webpack 2 中不再是可选的
  25.        // 查看 webpack 1 升级指南。
  26.        options: {
  27.          presets: ["es2015"]
  28.        },
  29.        // loader 的可选项
  30.      }]
  31.  }

  ## 4.插件(plugins)

  插件是 webpack 的支柱功能。webpack 自身也是构建于,你在 webpack 配置中用到的相同的插件系统之上

</>复制代码

  1. var webpack = require("webpack");
  2. // 导入非 webpack 自带默认插件
  3. var ExtractTextPlugin = require("extract-text-webpack-plugin");
  4. var DashboardPlugin = require("webpack-dashboard/plugin");
  5. // 在配置中添加插件
  6. plugins: [
  7.  // 构建优化插件
  8.  new webpack.optimize.CommonsChunkPlugin({
  9.    name: "vendor",
  10.    filename: "vendor-[hash].min.js",
  11.  }),
  12.  new webpack.optimize.UglifyJsPlugin({
  13.    compress: {
  14.      warnings: false,
  15.      drop_console: false,
  16.    }
  17.  }),
  18.  new ExtractTextPlugin({
  19.    filename: "build.min.css",
  20.    allChunks: true,
  21.  }),
  22.  new webpack.IgnorePlugin(/^./locale$/, /moment$/),
  23.  // 编译时(compile time)插件
  24.  //html文件插件
  25.  new HtmlWebpackPlugin({
  26.      template: "index.html"
  27.      title: "My App",
  28.      filename: "assets/admin.html",
  29.      chunks: ["app"],
  30.      excludeChunks: [ "dev-helper" ]
  31.    })
  32. ]
5 .开发中 Server(devServer)

</>复制代码

  1. devServer: {
  2.    //proxy: { // proxy URLs to backend development server
  3.    // "/api": "http://localhost:3000"
  4.   // },
  5.    contentBase: path.join(__dirname, "public"), // boolean | string | array, static file location
  6.    compress: true, // enable gzip compression
  7.    //historyApiFallback: true, // true for index.html upon 404, object for multiple paths
  8.    hot: true, // hot module replacement. Depends on HotModuleReplacementPlugin
  9.    //https: false, // true for self-signed, object for cert authority
  10.    //noInfo: true, // only errors & warns on hot reload
  11.    // ...
  12.  },
  13.      
  14. devtool:"none"/"source-map" // 生产环境
  15. devtool:"eval-source-map"//开发环境
7. externals

</>复制代码

  1. //配置
  2. externals: {
  3.  jquery: "jQuery"
  4. }
  5. //代码中使用
  6. import $ from "jquery";
  7. $(".my-element").animate(...);
附录 1. loader 分类列表 加载文件

raw-loader:把文本文件的内容加载到代码中去
file-loader:把文件输出到一个文件夹中,在代码中通过相对 URL 去引用输出的文件,
url-loader:和 file-loader 类似,但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去,在
source-map-loader:加载额外的 Source Map 文件,以方便断点调试,
svg-inline-loader:把压缩后的 SVG 内容注入到代码中,
node-loader:加载 Node.js 原生模块 .node 文件。
image-loader:加载并且压缩图片文件。
json-loader:加载 JSON 文件。
yaml-loader:加载 YAML 文件。

编译模版

handlebars-loader:把 Handlebars 模版编译成函数返回。
markdown-loader:把 Markdown 文件转换成 HTML。

转换脚本语言

babel-loader:把 ES6 转换成 ES5,在3-1使用 ES6 语言中有介绍。
ts-loader:把 TypeScript 转换成 JavaScript,在3-2使用 TypeScript 语言中有遇到。
awesome-typescript-loader:把 TypeScript 转换成 JavaScript,性能要比 ts-loader 好。
coffee-loader:把 CoffeeScript 转换成 JavaScript。

转换样式文件

css-loader:加载 CSS,支持模块化、压缩、文件导入等特性。
style-loader:把 CSS 代码注入到 JavaScript 中,通过 DOM 操作去加载 CSS。
sass-loader:把 SCSS/SASS 代码转换成 CSS,在3-4使用 SCSS 语言中有介绍。
postcss-loader:扩展 CSS 语法,使用下一代 CSS,在3-5使用 PostCSS中有介绍。
less-loader:把 Less 代码转换成 CSS 代码。
stylus-loader:把 Stylus 代码转换成 CSS 代码。

检查代码

eslint-loader:通过 ESLint 检查 JavaScript 代码,在 3-16检查代码中有介绍。
tslint-loader:通过 TSLint 检查 TypeScript 代码。
mocha-loader:加载 Mocha 测试用例代码。
coverjs-loader:计算测试覆盖率。

其它

vue-loader:加载 Vue.js 单文件组件,在3-7使用 Vue 框架中有介绍。
i18n-loader:加载多语言版本,支持国际化。
ignore-loader:忽略掉部分文件,在3-11构建同构应用中有介绍。
ui-component-loader:按需加载 UI 组件库,例如在使用 antd UI 组件库时,不会因为只用到了 Button 组件而打包进所有的组件。

2.常用 Plugins  用于修改行为

context-replacement-plugin:修改 require 语句在寻找文件时的默认行为。
ignore-plugin:用于忽略部分文件。

用于优化

extract-text-webpack-plugin:提取 JavaScript 中的 CSS 代码到多带带的文件中
prepack-webpack-plugin:通过 Facebook 的 Prepack 优化输出的 JavaScript 代码性能,
uglifyjs-webpack-plugin:通过 UglifyES 压缩 ES6 代码,
webpack-parallel-uglify-plugin:多进程执行 UglifyJS 代码压缩,提升构建速度。
imagemin-webpack-plugin:压缩图片文件。
webpack-spritesmith:用插件制作雪碧图。
ModuleConcatenationPlugin:开启 Webpack Scope Hoisting 功能,
dll-plugin:借鉴 DDL 的思想大幅度提升构建速度,
hot-module-replacement-plugin:开启模块热替换功能。

其它

serviceworker-webpack-plugin:给网页应用增加离线缓存功能,在
stylelint-webpack-plugin:集成 stylelint 到项目中,
i18n-webpack-plugin:给你的网页支持国际化。
provide-plugin:从环境中提供的全局变量中加载模块,而不用导入对应的文件。
web-webpack-plugin:方便的为单页应用输出 HTML,比 html-webpack-plugin 好用。

配置汇总

</>复制代码

  1. var path = require("path")
  2. var webpack = require("webpack")
  3. //性能分分析
  4. const WebpackMonitor = require("webpack-monitor");
  5. const HtmlWebpackPlugin = require("html-webpack-plugin");
  6. var ExtractTextPlugin = require("extract-text-webpack-plugin");
  7. module.exports = {
  8. mode: " "production" | "development" | "none"",
  9. entry: {
  10.   a: "./app/entry-a",
  11.   b: ["./app/entry-b1", "./app/entry-b2"]
  12. },
  13. output: {
  14.   path: path.resolve(__dirname, "dist"), // string,
  15.   filename: "bundle.js", // string
  16.   filename: "[name].js", // 用于多个入口点(entry point)(出口点?)
  17.   filename: "[chunkhash].js", // 用于长效缓存
  18.   publicPath: "",
  19.   publicPath: "https://cdn.example.com/"
  20. },
  21. module: {
  22.   rules: [
  23.     {
  24.       test: /.js$/,
  25.       loader: "babel-loader",
  26.       exclude: /node_modules/
  27.     },
  28.     {
  29.       // 用正则去匹配要用该 loader 转换的 CSS 文件
  30.       test: /.css$/,
  31.       use: ExtractTextPlugin.extract({
  32.         use: ["style-loader", "css-loader", "postcss-loader"],
  33.         include: path.join(__dirname, "./src"),
  34.         exclude: /node_modules/
  35.       })
  36.     },
  37.     {
  38.       test: /.(png|jpg|gif|svg|bmp|eot|woff|woff2|ttf)$/,
  39.       loader: {
  40.         loader: "file-loader",
  41.         options: {
  42.           name: "[name].[ext]?[hash]"
  43.         }
  44.       }
  45.     },
  46.     {
  47.       test: /.(png|jpg|gif|svg|bmp|eot|woff|woff2|ttf)$/,
  48.       loader: {
  49.         loader: "url-loader",
  50.         options: {
  51.           limit: 5 * 1024, // 图片大小 > limit 使用file-loader, 反之使用url-loader
  52.           outputPath: "images/" // 指定打包后的图片位置
  53.         }
  54.       }
  55.     },
  56.     {
  57.       // 暴露模块
  58.       test: require.resolve("jquery"), // 注意 这里是require的resolve 方法
  59.       use: {
  60.         loader: "expose-loader",
  61.         options: "$"
  62.       }
  63.     }
  64.   ]
  65. },
  66. plugins: [
  67.   // 构建优化插件
  68.   new webpack.optimize.CommonsChunkPlugin({
  69.     name: "vendor",
  70.     filename: "vendor-[hash].min.js"
  71.   }),
  72.   new webpack.optimize.UglifyJsPlugin({
  73.     compress: {
  74.       warnings: false,
  75.       drop_console: false
  76.     }
  77.   }),
  78.   //提取css文件
  79.   new ExtractTextPlugin({
  80.     filename: "build.min.css",
  81.     allChunks: true
  82.   }),
  83.   new WebpackMonitor({
  84.     capture: true, // -> default "true"
  85.     target: "../monitor/myStatsStore.json", // default ->  "../monitor/stats.json"
  86.     launch: true, // -> default "false"
  87.     port: 3030 // default -> 8081
  88.   }),
  89.   //html文件插件
  90.   new HtmlWebpackPlugin({
  91.     template: "index.html",
  92.     title: "My App",
  93.     filename: "assets/admin.html",
  94.     chunks: ["app"],
  95.     excludeChunks: ["dev-helper"]
  96.   })
  97. ],
  98. devServer: {
  99.   //proxy: { // proxy URLs to backend development server
  100.   //  "/api": "http://localhost:3000"
  101.   // },
  102.   contentBase: path.join(__dirname, "public"), // boolean | string | array, static file location
  103.   compress: true, // enable gzip compression
  104.   //historyApiFallback: true, // true for index.html upon 404, object for multiple paths
  105.   hot: true // hot module replacement. Depends on HotModuleReplacementPlugin
  106.   //https: false, // true for self-signed, object for cert authority
  107.   //noInfo: true, // only errors & warns on hot reload
  108.   // ...
  109. },
  110. devtool: "eval-source-map", //开发环境
  111. //配置
  112. externals: {
  113.   jquery: "jQuery"
  114. }
  115. };
其他 设置淘宝npm镜像

</>复制代码

  1. $ npm install -g cnpm --registry=https://registry.npm.taobao.org
vm 适配

</>复制代码

  1. cnpm i postcss-import postcss-url autoprefixer postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext cssnano postcss-viewport-units cssnano-preset-advanced -D
  2. npm install viewport-units-buggyfill
  3. var hacks = require("viewport-units-buggyfill/viewport-units-buggyfill.hacks");
  4. require("viewport-units-buggyfill").init({
  5. hacks: hacks
  6. });

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/108394.html

相关文章

  • 前端资源系列(4)-前端学习资源分享&前端面试资源汇总

    摘要:特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 本以为自己收藏的站点多,可以很快搞定,没想到一入汇总深似海。还有很多不足&遗漏的地方,欢迎补充。有错误的地方,还请斧正... 托管: welcome to git,欢迎交流,感谢star 有好友反应和斧正,会及时更新,平时业务工作时也会不定期更...

    princekin 评论0 收藏0
  • React技术栈实现XXX点评App demo

    摘要:项目的架构也是最近在各种探讨研究。还求大神多指点项目技术总结技术栈项目结构探究初体验关于项目中的配置说明项目简单说明开发这一套,我个人的理解是体现的是代码分层职责分离的编程思想逻辑与视图严格区分。前端依旧使用技术栈完成。 项目地址:https://github.com/Nealyang/R...技术栈:react、react-router4.x 、 react-redux 、 webp...

    wslongchen 评论0 收藏0
  • 7月份前端资源分享

    摘要:更多资源请文章转自月份前端资源分享的作用数组元素随机化排序算法实现学习笔记数组随机排序个变态题解析上个变态题解析下中的数字前端开发笔记本过目不忘正则表达式聊一聊前端存储那些事儿一键分享到各种写给刚入门的前端工程师的前后端交互指南物联网世界的 更多资源请Star:https://github.com/maidishike... 文章转自:https://github.com/jsfr...

    pingan8787 评论0 收藏0
  • 2018年第33周-javeer对nodejs体会

    摘要:流程源处理源代码,例如过滤任何值。工艺类从编译后处理生成的文件,例如对类进行字节码增强。整合后的测试执行集成测试后执行所需的操作。校验运行任何检查以验证包装是否有效并符合质量标准。 nodejs和es6 nodejs的语法和es6不一样,如模块系统,一个是CommonJS的require、一个是es6的import,写模块也不一样。 nodejs的npm 我来理解,nodejs类似与j...

    xiongzenghui 评论0 收藏0
  • webpack 基础与项目优化实践总结

    摘要:前言本文基于,主要涉及基本概念基本配置和实际项目打包优化。关于概念方面参考官网,常用配置来自于网络资源,在文末有相关参考链接,实践部分基于自己的项目进行优化配置。同一文件中,修改某个影响其他。 前言:本文基于weboack4.x,主要涉及webpack4 基本概念、基本配置和实际项目打包优化。关于概念方面参考官网,常用配置来自于网络资源,在文末有相关参考链接,实践部分基于自己的项目进行...

    Scorpion 评论0 收藏0

发表评论

0条评论

ls0609

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<