![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 58
yaoyongcsdn
好好学习,天天向上!
展开
-
前端-webpack5汇总
webpack是一个用于现代 JavaScript 应用程序的静态模块打包工具.用了一段时间,但是感觉有点乱,所以重新整理到一块.官方地址:https://webpack.docschina.org/1.Node.js的安装和配置2.webpack5项目初始化3.webpack5项目目录结构4.webpack5项目基本配置5.webpack5项目常用loader配置...原创 2021-09-05 23:22:35 · 158 阅读 · 0 评论 -
webpack5项目-配置模块如何解析
目录一.解析模块时应搜索的目录二.解析指定扩展名文件三.解析别名四.总结一.解析模块时应搜索的目录module.exports = { //... resolve: { modules: ['node_modules'], },};如果你想要添加一个目录到模块搜索目录,此目录优先于node_modules/搜索:const path = require('path');module.exports = { //... resolve:..原创 2021-09-05 20:31:24 · 446 阅读 · 0 评论 -
webpack5项目-编译打包常用资源模块loader配置
目录一.资源模块二.编译打包配置1.编译打包图片文件2.编译打包字体文件3.编译打包css文件4.编译打包less文件5. 打包sass文件6.编译打包js文件排除不应参与转码的库7.打包vue文件三.总结1.npm命令2.webpack.config.js文件3.package.json文件4.babel.config.json文件一.资源模块资源模块(asset module)是一种模块类型,它允许使用资源文件(字体,图标等)而无..原创 2021-09-05 19:48:25 · 711 阅读 · 0 评论 -
webpack5项目-基本配置
目录一.配置项目出入口二.添加模式三.添加devtool四.安装本地环境和内存html插件五.安装开发工具一.配置项目出入口webpack.config.js(文档)const path = require('path'); module.exports = { entry: { //设置入口文件为src/main.js 将来会被打包到dist目录下 main: './src/main.js', //other..原创 2021-09-05 01:38:43 · 3892 阅读 · 0 评论 -
webpack5项目-目录结构
目录一.基本目录结构二.说明一.基本目录结构D:\VSCODE\WEBPACK-DEMO│ package.json│ webpack.config.js│├─dist├─node_modules└─src index.html index.js二.说明1.packgage.json主要用于项目依赖包版本控制及脚本配置,严格遵守json格式2.webpack.config.jswebpack项目主要配置文件,非常重要3原创 2021-09-05 00:30:14 · 888 阅读 · 0 评论 -
webpack5项目-初始化
目录一.新建项目二.进入项目根目录三.执行初始化操作一.新建项目mkdir webpack-demo二.进入项目根目录cd webpack-demo三.执行初始化操作npm init -y初始化完毕会在项目根目录下生成package.json文件,目前项目没有任何内容因此只有一个package.json文件,内容如下:{ "name": "webpack-demo", "version": "1.0.0", "description": "",原创 2021-09-05 00:04:40 · 275 阅读 · 0 评论 -
webpack中使用vue实战-4(使用Vue-Router)
一.安装Vue-Routernpm install -S vue-router如果在一个模块化工程中使用它,必须要通过Vue.use()明确地安装路由功能:import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)二.创建路由模块新建一个router.js文件作为项目路由入口这里以用户登录和注册为例来简单的实现一个路由,其中组件假设已经创建好了src/router.js/...原创 2021-08-30 17:09:31 · 228 阅读 · 0 评论 -
webpack中使用vue实战-2(项目准备工作)
一.安装vue包npm install -S vue二.安装和配置loader安装并配置一些基本的loader,项目中会用到1.安装处理css的css-loadernpm install -D style-loader css-loaderwebpack.config.jsmodule.exports = { module: { rules: [ { test: /\.css$/i, use: ["style-load原创 2021-08-29 19:37:55 · 363 阅读 · 0 评论 -
webpack中使用vue实战-1(搭建webpack项目)
目录一.新建目录结构及文件二.添加配置文件三.安装插件四.安装开发工具五.测试项目是否搭建成功一.新建目录结构及文件mkdir webpack-vuecd webpack-vuenpm init -ynpm install webpack webpack-cli --save-devD:\VSCODE\WEBPACK-VUE│ package.json│└─src index.html main.jssrc/index..原创 2021-08-29 19:36:56 · 324 阅读 · 0 评论 -
webpack中使用vue实战-3(vue组件)
目录一.导入vue模块二.编写vue组件三.导入vu组件四.创建vue的实例五.确保vm控制的区域存在六.测试vue组件是否引入成功一.导入vue模块在项目js入口文件main.js中导入vue模块src/main.js//项目js入口文件import Vue from "vue";二.编写vue组件定义一个.vue结尾的组件,其中组件由三部分组成:template script stylesrc/App.vue<template>原创 2021-08-29 19:38:30 · 143 阅读 · 0 评论 -
webpack使用总结
参考文档:https://webpack.docschina.org/concepts/一.概念本质上,webpack是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时,它会在内部从一个或多个入口点构建一个依赖图(dependency graph),然后将你项目中所需的每一个模块组合成一个或多个bundles,它们均为静态资源,用于展示你的内容。从 v4.0.0 开始,webpack 可以不用再引入一个配置文件来打包项目,然而,它仍...原创 2021-08-26 18:56:17 · 527 阅读 · 0 评论