js加版本号 webpack_webpack

一、安装

1.查看版本情况

npm info webpack

2.全局安装

npm i -g webpack@4 webpack-cli@4 //4为版本号

3.本地安装 详见webpack

mkdir webpack-demo

cd webpack-demo

npm init -y

npm install webpack webpack-cli --save-dev

4.本地安装查看版本号

./node_modules/.bin/webpack --version 或者 npx webpack(此方法文件路径若有空格会出现错误)

5.webpack是干什么的？

转译代码(ES6转为ES5，SCSS转为CSS)/构建build/代码压缩/代码分析

6.用webpack-dev-server进行本地预览

二、几个实例

1.用webpack转译JS(npx webpack)

会分析JS代码将其变成IE或者低版本浏览器可用的浏览器

如何去除警告

改成production模式为用户所用，所有代码都会最小化没有注释

2.理解文件名中的hash的用途,便于添加缓存

var path = require('path');

module.exports = {

mode: 'development',

entry: './foo.js',//入口

output: {

path: path.resolve(__dirname, 'dist'),//出口路径

filename: 'foo.bundle.js'//出口文件名可自行设置

}

};

filename可以改用hash

var path = require('path');

module.exports = {

mode: 'development',

entry: './src/index.js',

output: {

filename: '[name].[contenthash].js'

}

};

HTTP缓存

比如我们访问http://baidu.com，然后它首页的index.html里的css,js等文件是可以默认缓存一年的，缓存是跟着文件名走的，如果缓存的内容有更新，文件名里的数字字母组合就会产生变化。浏览器发现文件名有了变化就会去请求新的。

首页是一定不能做缓存的，如果首页都缓存了就无法通知浏览器其它的文件的变化了。

只要内容变了就会得到一个新的文件

如果CSS里内容发生了修改通过webpack里改变hash产