前端学习笔记-webpack学习

时间  2021-08-12
标签 css html vue node react webpack git web vue-cli shell 栏目 CSS 繁體版
原文   原文链接

webpack三种哈希值

  • hash：跟整个项目的构建相关，构建生成的文件hash值都是同样的，只要项目里有文件更改，整个项目构建的hash值都会更改。（通常不用）
  • chunkhash：根据不一样的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的hash值。
  • contenthash：由文件内容产生的hash值，内容不一样产生的contenthash值也不同。

__dirname等

  • __dirname，表示当前正在执行的js所在的目录;
  • __filename(表示当前正在执行的js的完整路径);
  • path.join('/目录1', '../', '目录3/目录4', '目录5')；合并目录，最后的结果是"\目录3\目录4\目录5"；
  • process.cwd()是指当前node命令执行时所在的文件夹目录；
  • path.extname(filename);//获取后缀名

css modules

css modules是一种解决css命名空间的方案，做为scope CSS的替代方案css

index.html里的插值

  • <%= VALUE %> 用来作不转义插值；
  • <%- VALUE %> 用来作 HTML 转义插值；若是VALUE里有<>这样须要转义的字符时用;
  • <% expression %> 用来描述 JavaScript 流程控制，expression便是js语句，能够有if else等；

env环境变量

  • .env # 在全部的环境中被载入
  • .env.local # 在全部的环境中被载入，但会被 git 忽略
  • .env.[mode] # 只在指定的模式中被载入
  • .env.[mode].local # 只在指定的模式中被载入，但会被 git 忽略
  • 在webpack.config.js里或者vue.config.js里的chainWebpack的config.plugin('define').tap里添加的变量，拥有更高的优先级，不会被.env重写
  • mode能够是自定义的模式，配合vue-cli-service build --mode [mode]命令，能够实现不一样模式下有不一样的环境变量。须要在.env.mode文件里指定相应的NODE_ENV值，如NODE_ENV = 'production'，

不一样模式不一样的环境变量

  • 命令行传参，如npm run serve --aaa。在vue.config.js里取值如let tempO = JSON.parse(process.env.npm_config_argv).original[2];或者const argArr = process.argv.splice(2);
  • 自定义npm命令如 "local": "set VUE_APP_AAA=aaa && set BBB=qwer && npm run serve"，在mac的shell里对应写法是 "local": "VUE_APP_AAA=aaa set BBB=qwer npm run serve"；
  • 设置不一样的.env.[mode]文件如.env.staging，而后自定义npm命令"build:stage": "vue-cli-service build --mode staging"

这些方法也能够有以下的使用技巧html

"bn": "npm run build && node replace",
"serve": "node init && vue-cli-service serve",
复制代码

判断是否是生产环境

process.env.NODE_ENV === 'production'vue

本地预览dist打包文件

本地预览 dist 目录须要启动一个 HTTP 服务器来访问 (除非你已经将 publicPath 配置为了一个相对的值)，因此以 file:// 协议直接打开 dist/index.html 是不会工做的。 在本地预览生产环境构建最简单的方式就是使用一个 Node.js 静态文件服务器，例如 serve： npm install -g servenode

一些经常使用的修改方法

设置一个scss公用文件

在vue.config.js里react

module.exports = {
    css: {
        loaderOptions: {
            scss: {
                prependData: "@import '~@/assets/style/public.scss';"
            }
        }
    }
}
复制代码

若是声明了一个'style',如alias: { 'style': resolve('static/style') } 在使用时，若是直接@import "style/mixin.scss";是会报错的，须要改成@import "~style/mixin.scss";css相关文件须要特殊处理webpack

经过chainWebpack 调整内联文件的大小限制

例如，下列代码会将其限制设置为 10kbgit

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
    .rule('images')
    .use('url-loader')
    .loader('url-loader')
    .tap(options => Object.assign(options, { limit: 10240 }))
  }
}
复制代码

经过chainWebpack 添加新的环境变量

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.plugin('define').tap(args => {
        let ori = args[0]['process.env'];
        args[0]['process.env'] = {
            ...ori,
            AA: JSON.stringify('<span>cscs</span>'),
            BB: 999,
            VUE_APP_UU: JSON.stringify('ppooii'),
            VUE_APP_UO: JSON.stringify('v_uuu'),
        }
        return args;
    });
  }
}
复制代码

经过chainWebpack 添加新的js loader

// vue.config.js
const path = require('path');
module.exports = {
  chainWebpack: config => {
    config.module.rule('js')
    .use('selfjs')
    .loader(path.resolve(__dirname, 'loader/selfjs.js'))
    .end()
  }
}
复制代码

loader下的selfjs.js文件内容：web

module.exports = function loader(source) {
    console.log(source)
    source = source + ';;;;;;;;';
    // return `export default ${ JSON.stringify(source) }`; // 返回值
    return source; // 返回值
    // return source; // 返回值
};
复制代码

对应的loader或plugin名称，能够在output.js里查看到vue-cli

webpack插件介绍

名称 做用 说明
compression-webpack-plugin gzip压缩插件
webpack-bundle-analyzer 包分析工具 cross-env须要再安装
webpack-theme-color-replacer 全局修改主题颜色的插件 通常后台系统用
webpack-obfuscator 代码混淆
prerender-spa-plugin 处理单页面应用的seo，预渲染 配合vue-meta-info使用更好
copy-webpack-plugin 将单个文件或整个目录复制到构建目录
webpack-merge 合并webapck配置项
html-webpack-plugin 处理html文件
clean-webpack-plugin 清理以前的打包目录
mini-css-extract-plugin 分离打包css的插件，由于默认css会被打包到js文件里 extract-text-webpack-plugin已经不建议使用了
babel-loader 处理js文件 配合@babel/core,@babel/preset-env
postcss-loader 处理css的浏览器兼容，好比加-webkit-前缀等 配合autoprefixer

不要使用cnpm

设置npm镜像shell

  • npm config set registry registry.npm.taobao.org

  • npm config set disturl npm.taobao.org/dist

  • npm config set electron_mirror npm.taobao.org/mirrors/ele…

  • npm config set sass_binary_site npm.taobao.org/mirrors/nod…

  • npm config set phantomjs_cdnurl npm.taobao.org/mirrors/pha…

  • package.json文件只能锁定大版本，也就是版本号的第一位，并不能锁定后面的小版本，在npm 5时添加package-lock.json。

  • npm i会根据package-lock.json里的内容来处理和安装依赖而不是package.json。cnpm i不受package-lock.json影响，只会根据package.json进行下载。

  • npm i 会生成package-lock.json，若是删除了，再从新npm i会生成package-lock.json。cnpm i是不会生成package-lock.json的。

  • cnpm i xxx@xxx不会跟新到package-lock.json中去。npm i xxx@xxx会跟新到package-lock.json中去。

"dependencies": {
  "bluebird": "^3.3.4",
  "body-parser": "~1.15.2"
}
复制代码

bluebird的版本号：^3.3.4 body-parse的版本号：~1.15.2

库的版本号详解(^和~区别)

  • 波浪符号（~）：他会更新到当前minor version（也就是中间的那位数字）中最新的版本。放到咱们的例子中就是：body-parser:~1.15.2，这个库会去匹配更新到1.15.x的最新版本，若是出了一个新的版本为1.16.0，则不会自动升级。波浪符号是曾经npm安装时候的默认符号，如今已经变为了插入符号。
  • 插入符号（^）：这个符号就显得很是的灵活了，他将会把当前库的版本更新到当前major version（也就是第一位数字）中最新的版本。放到咱们的例子中就是：bluebird:^3.3.4，这个库会去匹配3.x.x中最新的版本，可是他不会自动更新到4.0.0。

npm和yarn命令对比

npm yarn
npm install yarn
npm install react --save yarn add react
npm uninstall react --save yarn remove react
npm install react --save-dev yarn add react --dev
npm update --save npm update --save

npm经常使用命令

命令 含义 说明
npm config ls 查看你的 npm 配置
npm i -S packname 安装项目（运行时、发布到生产环境时）依赖；例：vue。对应package.json中的dependencies npm install --save packname
npm i -D packname 安装工程构建（开发时、“打包”时）依赖；如babel-loader。对应package.json中的devDependencies npm install --save-dev packname
npm list -g --depth 0 查看全部已安装的全局包
npx vue-cli-service help 查看cli全部可用的命令 vue-cli
npx vue-cli-service help build 查看npm run build命令全部可选的参数 vue-cli
npx vue-cli-service help inspect 查看vue inspect全部可选的参数 vue-cli
vue inspect > output.js 将config输出至同目录的output.js文件 vue-cli
vue inspect --plugins 查看全部使用的plugins vue-cli
vue-cli-service serve --open 启动时自动打开浏览器 vue-cli package.json
vue-cli-service build --report 生成 report.html 以帮助分析包内容 vue-cli package.json
vue-cli-service build --report-json 生成 report.json 以帮助分析包内容 vue-cli package.json
vue-cli-service build --modern 会产生两个应用的版本：一个现代版的包，面向支持 ES modules 的现代浏览器，另外一个旧版的包，面向不支持的旧浏览器,旧包带有legacy标志 vue-cli package.json
set NODE_ENV=production && set AAA=123 && npm run build 设置一些环境变量再执行一个命令,mac里的写法会不一样NODE_ENV=production 空格 xxxx vue-cli package.json
vue-cli-service build --mode cscs 用.env.cscs里的环境变量打包一个内容，和npm run build --mode cscs不等价 vue-cli package.json

更多cli命令请参考：cli.vuejs.org/zh/guide/cl…

参考：2020年了,再不会webpack敲得代码就不香了(近万字实战)

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程