在webpack中运行vue
摘要：网址：https://vue-loader.vuejs.org/zh/ Vue Loader 是一个 webpack 的 loader，它允许你以一种名为单文件组件的格式撰写 Vue 组件 安装loader npm i -S vue npm i -D vue-loader vue-template-
阅读全文
posted @
2021-02-25 15:28
Tsunami黄嵩粟
阅读(78)
推荐(0) 编辑
webpack 路径别名与导入后缀省略
摘要：// 解析模块的规则 resolve: { // 配置解析模块路径别名：优点简写路径，缺点路径没有提示 alias: { // 定义一个@变量，可在import引入时使用 '@': path.resolve(__dirname, '../src') }, // 配置省略文件路径的后缀名称 impor
阅读全文
posted @
2021-02-25 15:17
Tsunami黄嵩粟
阅读(322)
推荐(0) 编辑
webpack externals忽略不打入的包
摘要：例如项目中使用从 CDN 引入 jQuery，而不是把它打包进来使用 import $ from 'jquery' webpack.config.js externals: { jquery: 'jQuery' }
阅读全文
posted @
2021-02-25 15:15
Tsunami黄嵩粟
阅读(278)
推荐(0) 编辑
webpack代码分割
摘要：在做一些单页应用中，若不做任何处理，所有项目文件会打包为一个文件，这个文件非常的大，造成网页在首次进入时比较缓慢。做了代码分割后，会将代码分离到不同的chunk中，然后进行按需加载这些文件，能够提高页面首次进入的速度，网站性能也能够得到提升。 实现方案： entry多入口实现分割 optimizat
阅读全文
posted @
2021-02-25 15:07
Tsunami黄嵩粟
阅读(206)
推荐(0) 编辑
webpack tree-shaking
摘要：tree-shaking是webpack中自带的功能，其作用是去除项目中无用代码(一般只的都是自己所写代码)，减少代码体积(涉及到第三方类库,往往不一定有效。) 前提： 必须使用es6模块 开启production环境 在package.json文件中添加了 "sideEffects": false
阅读全文
posted @
2021-02-25 14:48
Tsunami黄嵩粟
阅读(58)
推荐(0) 编辑
webpack js兼容处理
摘要：webpack在不需要引入任何loader可以对于js进行打包处理，但是它不会对于js兼容性进行任务的处理，而我们编写的项目是需要在不同的浏览器中运行的，此时就需要对于js的兼容性在打包过程中进行对应的处理。使用babel来完成对应的js兼容处理 # 早期使用 @babel/polyfill 来完成
阅读全文
posted @
2021-02-25 14:45
Tsunami黄嵩粟
阅读(151)
推荐(0) 编辑
webpack处理静态资源
摘要：像项目中字体资源是不需要进行打包处理的，可以直接的通过复制方式给打包到目标目录中 # 安装 npm i -D copy-webpack-plugin # 引入 const CopyPlugin = require('copy-webpack-plugin') # plugins配置 plugins:
阅读全文
posted @
2021-02-25 14:38
Tsunami黄嵩粟
阅读(158)
推荐(0) 编辑
webpack配置图片处理
摘要：# 安装 npm i -D url-loader html-loader file-loader # loader配置 module: { rules: [ // 图片处理 { test: /\.(png|jpeg|jpg|gif)$/, use: [ { loader: 'url-loader',
阅读全文
posted @
2021-02-25 14:29
Tsunami黄嵩粟
阅读(110)
推荐(0) 编辑
webpack配置css预处理
摘要：webpack默认只支持js的打包，不支持其它类型，为了让它支持样式的打包就需要加载一些loader 打包css文件 在webpack中配置对应的loader 在入口js文件中通过import导入样式 sass处理 # 安装css预处理loader npm i -D style-loader css
阅读全文
posted @
2021-02-25 11:12
Tsunami黄嵩粟
阅读(108)
推荐(0) 编辑
webpack的基本使用
摘要：在项目根目录下面创建一个webpack.config.js文件，webpack运行的环境为nodejs环境，所以此文件中的模块化规范为commonjs规范写法 // webpack运行node环境的 // 此处的模块化规范为 commonjs规范 module.exports 导出 导入 requi
阅读全文
posted @
2021-02-19 18:08
Tsunami黄嵩粟
阅读(83)
推荐(0) 编辑
webpack
摘要：官网：https://webpack.js.org 中文网：https://www.webpackjs.com webpack是一种前端资源构建工具，一个静态模块打包器.在webpack看来，前端的所有资源文件(js/json/css/image/less/sass...)都会作为模块处理。它将根据
阅读全文
posted @
2021-02-19 17:55
Tsunami黄嵩粟
阅读(149)
推荐(0) 编辑
