# 安装最新版本
npm install --global webpack

# 或者 安装特定版本
npm install --global webpack@<version>

npm install --global webpack-cli

npm i -g webpack@v4.35.2
npm i -g webpack-cli@3.3.6

webpack -v

E:\vue\npm-demo\webpack-demo2>webpack ./src/main.js -o ./dist/bundle.js

// 引入node中的path模块，处理文件路径 的小工具
const path = require(''path'')

// 导出一个webpack具有特殊属性配置的对象
module.exports = {
    mode: ''none'', // 指定模式配置："development" | "production" | "none"
    // 入口
    entry: ''./src/main.js'', // 入口模块文件路径 
    // 出口
    output: {
        // path: ''./dist/'', 错误的，要指定绝对路径
        path: path.join(__dirname, ''./dist/''), //打包的结果文件生成的目录要是绝对路径
        filename: ''bundle.js'' 
    }
}

webpack

npm uninstall -g webpack
npm uninstall -g webpack-cli

# 安装最新版本
npm install --save-dev webpack  
# 安装特定版本
npm install --save-dev webpack@<version>

npm install --save-dev webpack-cli

# 1. 进入到 webpack-demo2
cd e:\vue\npm-demo\webpack-demo2

# 2. 初始化项目 `-y` 是采用默认配置
npm init -y

# 3. 安装 v4.35.2 ，不要少了 v
npm i -D webpack@v4.35.2

# 安装 CLI
npm i -D webpack-cli@3.3.6

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "show": "webpack -v",
    "start": "node ./src/main.js",
    "build": "webpack"
  },

npm run show

npm run start

npm start

npm run build

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "show": "webpack -v",
    "start": "node ./src/main.js",
    "build": "webpack",
    "watch": "webpack --watch"  // 加上这个就可以自动帮我们打包了
  },

export default 成员

// ES6 注意 一个模块文件中，只能导出一个默认成员，注释掉一个
export default function() {  // 导出函数
    console.log(''我是bar模块--ES6'')
}


export default { // 导出对象
    name: ''邹邹''
}

// Es6 导入默认成员
import bar from ''./bar''

bar()  // 调用函数


console.log(bar)
console.log(bar.name)  // 对象的属性值

// ES6 可以导出多个非默认成员
export const x = ''xxx''
export var y = ''yyy''

export function add (a, b) {
    return a+b
}

// export z = ''zzz'' 错误的，没有数据类型
// export ''wwww'' 错误的，没有变量名和类型
// export function (x, y) { 错误的，没有函数名
//     return x+y
// }

// Es6 导入非默认成员
// 通过 解构赋值 的方式 来加载成员
// x 对应的是bar.js 模块中的 x 成员 ，y对应y成员，ad对应add成员 函数
import {x, y, add} from ''./bar''
console.log(x, y, add(10, 20))

// 通过解构赋值按需导入你需要的成员 
import {x, y} from ''./bar''
console.log(x, y)

// 会将默认成员 与 非默认成员 全部导入
import * as bar2 from ''./bar''
console.log(bar2, bar2.x, bar2.y, bar2.add(1,2))

前两天项目上线，用vue-cli npm run build命令打包，打包完成后我擦吓了一跳，15M。本来暂时不打算优化的，但是每次看着部署包这么大，想想还是先优化一下，让包好看点，免得以后出现心理阴影！

　　在把 map文件干掉后，发现 webpack 这打包的速度，也忒感人了。在进行不自动生成 map文件设置时，有看到webpack自带的 productionGzip功能，索性就一次性一起鼓捣鼓捣。

下面是瞎鼓捣历程，差点就鼓捣不出来了。

　　1、在项目 根目录config/index.js  中  build 内找到  productionGzip: false， 把 false改为true。与 productionSourceMap 刚好相反。

　　2、也就是说需要安装依赖 compression-webpack-plugin 官方推荐的命令是：(但是网不好的话就凉凉了)

npm install --save-dev compression-webpack-plugin    //在没有给定版本号时该命令默认安装最新版compression-webpack-plugin，问题恰恰就出在这。

　　　　安装完成以后，重新运行 npm run build，然后悲剧了：

　　　　从报错显示获知，是配置选项验证失败，但是是哪一项验证失败，或者那些项验证失败就不晓得了，打开报错日志，越看越蒙圈了，一脸茫然。从源代码里面也没看出个所以然。

 　　　　最后没得法了，只能去官网 https://www.npmjs.com/package/compression-webpack-plugin 上看看，有么得啥突破。进去第一眼就瞄到了 2.0.0 • Public • Published 3 months ago，一下就感觉有点不对了，一般小版本的更新都是 1.xx.xx，很少这种直接全零的，全零的一般适用于大版本的升级更新，再看看上面的配置项检验失败，选项属性匹配不上。突然有种莫名被坑的感觉。接着看下面的介绍和文档，①先对应了下node的版本 [email protected]，还在匹配的范围内。② Requirements：This module requires a minimum of Node v6.9.0 and Webpack v4.0.0 (此模块最低需要 Node v6.9.0和Webpack v4.0.0)，我这webpack版本明显差一大截。这下总算找到症结所在了。

　　3、找到症结所在，那处理起来就简单了。既然最新版本太高，在用的webpack高攀不起，那就只能给它降级了，木得法。

　　　　①卸载已经安装的最新版2.0 compression-webpack-plugin 安装包。

　　　　② 重新安装1.1.12版本(该版本为1.1的最新版)。卸载其实可以不用，直接执行安装命令，进行版本覆盖也行。

npm install --save-dev [email protected]　　　　//记得带版本号

　　　　③等安装好之后，重新执行 npm run build 进行打包，终于成功了，真他妈艰难！

安装过程中，还遇到另外一个问题。网速和墙的问题：

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
 -webkit-line-clamp: 2;
-webkit-box-orient: vertical;

//在scss中
         /*! autoprefixer: off */
         -webkit-box-orient: vertical;
          /* autoprefixer: on */

/* autoprefixer: off */
  -webkit-box-orient: vertical;
 /* autoprefixer: on */