搭建webpack-spa

一：初始化搭建webpack

*注意点

webpack 打包 会默认指向 src下的index.js
js treeshaking 在 prod 上线环境生效
index.html引入资源需要在output加上publicPath：“./”

1.1安装依赖

npm init -y
npm install webpack --save-dev
npm install webpack-cli -save-dev

1.2创建 src/indx.js

1.3 配置 package.json

1.4创建 components/sync，async

1.5 引入lodash

• 解决lodash 引用treeshaking问题

1.6 安装webpack-deep-scope-plugin

还可以这样

import {
     isArray} from 'lodash-es'
const sync=function(){
     
    console.log('sync')
}
const isArrayfun=(asg)=>{
     
        console.log(isArray(asg))
}
export default{
     
    sync,
    isArrayfun
}

二 css的应用

缺少依赖安装即可

2.1 webpack-config.js 设置css-loader

css-loader3.0 改变了语法位置正确如下图

三 css的treeshaking

• purify-css 安装

npm install purify-css --save-dev

• purify-webpack 安装

npm install purifycss-webpack --save-dev

• glob安装

npm install glob --save-dev

• css包裹在js文件中没有完全“摇掉”
  
  安装mini-css-extract-plugin
  
  这里需要注意的是 style-loader 不能使用 需要注释掉
  
  run dev 时 得屏蔽其他插件否则不生成css文件
  
  但是css用到了 localIdentName: ‘[path][name]__[local]–[hash:base64:5]’, 所以需要改变一下
  
  
  css treeshaing完成

四：黑科技 会说话的小黑窗

安装：set-iterm2-badge

• 小黑框提示

动态拉去webpack文件