前端学习笔记-webpack学习

甜甜圈小佩奇
1,258 阅读6分钟

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的替代方案

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"

这些方法也可以有如下的使用技巧

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

判断是不是生产环境

process.env.NODE_ENV === 'production'

本地预览dist打包文件

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

一些常用的修改方法

设置一个scss公用文件

在vue.config.js里

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相关文件需要特殊处理

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

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

// 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文件内容：

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

对应的loader或plugin名称，可以在output.js里查看到

webpack插件介绍

名称作用说明
compression-webpack-plugingzip压缩插件
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镜像

  • 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命令对比

npmyarn
npm installyarn
npm install react --saveyarn add react
npm uninstall react --saveyarn remove react
npm install react --save-devyarn add react --dev
npm update --savenpm update --save

npm常用命令

命令含义说明
npm config ls查看你的 npm 配置
npm i -S packname安装项目（运行时、发布到生产环境时）依赖；例：vue。对应package.json中的dependenciesnpm install --save packname
npm i -D packname安装工程构建（开发时、“打包”时）依赖；如babel-loader。对应package.json中的devDependenciesnpm 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查看所有使用的pluginsvue-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 空格 xxxxvue-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敲得代码就不香了(近万字实战)

avatar
文章
阅读
粉丝