搭建webpack-spa

最新推荐文章于 2022-02-09 16:50:05 发布

weixin_42241439

最新推荐文章于 2022-02-09 16:50:05 发布

阅读量200

点赞数

分类专栏：学习文章标签： weboack

本文链接：https://blog.csdn.net/weixin_42241439/article/details/103332547

版权

学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一：初始化搭建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完成