web pack 启动命令配置

"scripts": {
    "webpack-dev-server": "webpack-dev-server",
    "webpack": "webpack",
    "debug": "node --inspect --inspect-brk ./node_modules/webpack/bin/webpack.js",
    "prod": "npm run webpack -- --env.mode production",
    "dev": "npm run webpack-dev-server -- --env.mode development --hot",
    "prod:typescript": "npm run prod -- --env.presets typescript",
    "prod:analyze": "npm run prod -- --env.presets analyze",
    "prod:compress": "npm run prod -- --env.presets compress",
    "prod:debug": "npm run debug -- --env.mode production",
    "dev:debug": "npm run debug -- --env.mode development",
    "debug this":  "node —inspect —inspect-bro ./src/index.js"
  }

chrome的调试地址

 node --inspect --inspect-brk ./node_modules/webpack/bin/webpack.js

tree shaking
打包的时候只打包import中所需要引入的代码块

查看webpack打包后的文件结构示例
https://github.com/thelarkinn/webpack-workshop-2018/tree/feature/0310-add-first-config-mode-none

chrome查看调试查看调试地址

chrome://inspect/

多页面配置项目地址

https://github.com/mutualofomaha/multipage-webpack-plugin

其中examples目录下对应的多页面示例

模块热更新

"dev": "npm run webpack-dev-server -- --env.mode development --hot",

调用函数

if(module.hot){
    module.hot.accept("./print.js",function(){
        //使用更新过的print模块来执行某些操作·····
    });
}

css提取文件

# **[mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin)**

在生产环境配置中使用

图片处理 url-loade、file-loader
file-loader主要用来处理图片,其实也可以在js和html及其他文件上
url-loader在file-loader的基础上进行封装
url-loader 可以通过设置options中的limit将小的图片转成base64位编码

文件的loader处理方法
1.可以在webpack.config.js中的rules中进行处理
2.可以在文件引入时进行处理例如

import buttonSty from 'css-loader!./button.css

可将涉及的ts、vue、react等文件的编译的配置拆分出来
示例地址

https://github.com/TheLarkInn/webpack-workshop-2018/tree/feature/04014-typescript-preset

视图化引入的模块

# **[webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer)**

开启gzip压缩
compression-webpack-plugin插件进行压缩。

https://github.com/webpack-contrib/compression-webpack-plugin

js断点调试

devtool: source-map （cheap-module-source-map）

查询js文件时可通过webpack://进行相关文件的查找

webpack流行插件网址
webpack-contrib

别的

npm 帮助命令

npm help config

查看npm配置

npm config list -l

删除相关配置

npm config delete https-proxy