![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
你是人间五月天
这个作者很懒,什么都没留下…
展开
-
vue抽离路由模块
一、新建router.jsimport VueRouter from 'vue-router'import accout from './main/Account.vue'import goodsList from './main/GoodsList.vue'import child1 from './children/child1.vue'import child2 from './children/child2.vue'//3、创建路由对象var router = new Vue原创 2020-11-10 21:32:31 · 169 阅读 · 0 评论 -
vue组件中style的lang属性和scoped属性
<template> <div> <h1>这是account组件</h1> <router-link to="/account/child1">子组件1</router-link> <router-link to="/account/child2">子组件2</router-link> <router-view></rou.原创 2020-11-03 22:21:56 · 2951 阅读 · 0 评论 -
Vue结合webpack使用vue-router 显示组件及子组件
一、先安装vue-router模块npm i vue-router -S二、导入vue-router包importVueRouterfrom'vue-router'三、手动安装VueRouterVue.use(VueRouter)四、创建路由对象varrouter=newVueRouter({routes:[{path:'/account',component:accout},{path:'/goodsList'...原创 2020-10-28 21:45:13 · 181 阅读 · 0 评论 -
在webpack使用render渲染vue组件
1、建立login.vue 的组件,如图:2、在main.js中引入login.vue注意:webpack无法打包.vue的文件,需要安装相关的loader npmivue-loadervue-template-compiler-Dimport Vue from 'vue'//webpack无法打包 .vue的文件,需要安装相关的loader// npm i vue-loader vue-template-compiler -Dimport login from '...原创 2020-10-20 22:19:31 · 470 阅读 · 0 评论 -
webpack使用babel处理高级的ES6语法或者 ES7 语法
在webpack中,默认只能处理一部分ES6的新语法,一些更高级的ES6语法或者ES7语法,webpack是处理不了的;这时候,就需要借助于第三方的loader,来帮助webpack处理这些高级的语法,当第三方loader把高级语法转为低级的语法之后,会把结果交给webpack去打包到bundle.js中通过Babel,可以帮我们将高级的语法转换为低级的语法1.在webpack中,可以运行如下两套命令,安装两套包,去安装Babel相...原创 2020-10-14 22:22:36 · 795 阅读 · 0 评论 -
webpack中url-loader的使用
一、安装url-loader:npm i url-loader file-loader -D由于要依赖file-loader,所以一并安装二、在webpack.config.js文件中,增加匹配规则如下:name=[name]-[hash:8].[ext] 表示将文件重命名为原文件名加上八位hash值,后缀保持原后缀...原创 2020-09-26 22:10:33 · 929 阅读 · 0 评论 -
webpack配置less和scss的loader
一、less安装less-loader,npm i less-loader -D安装less,npm i less-D二、scss安装sass-loader,npm i sass-loader -D安装node-sass,npm i node-sass -D原创 2020-09-17 21:19:39 · 576 阅读 · 0 评论 -
webpack配置处理css样式的loader
注意:在main.js中直接引入 css是不能使用的,import'./css/index.css'//webpack只能打包处理js类型的文件,无法处理其他的非js文件,如果要处理非js类型的文件,我们需要手动安装一些合适的第三方loader加载器//1、想要打包处理css文件需要安装npmistyle-loadercss-loader-D//2、在webpack.config.js里面新增配置节点module,在module对象身上有个rules数组属性,存放所有第三方文件的匹配...原创 2020-09-16 22:00:29 · 463 阅读 · 0 评论 -
html-webpack-plugin的基本使用
1、安装html-webpack-plugin,执行npm i html-webpack-plugin -D2、在webpack.config.js文件中增加如下配置,如图:原创 2020-09-16 21:15:58 · 158 阅读 · 0 评论 -
webpack-dev-server常用的命令参数和两种配置方式
如图: //--open一启动就打开浏览器//--port8888指定端口//--contentBasesrc指定运行的根路径//--hot热部署原创 2020-09-09 22:25:46 · 814 阅读 · 0 评论 -
webpack-dev-server的使用
使用webpack-dev-server可实现自动打包编译的功能。1、首先在项目执行命令安装工具到本地依赖:npm i webpack-dev-server -D2、安装完毕后,这个工具的用法和webpack的命令的用法完全一样3、由于是在项目中本地安装webpack-dev-server,所以无法把它当作脚本命令在powershell终端中运行;(只有全局-g安装的工具才能),所以需在在package.json中增加配置,如图:然后 执行npm run dev即可运行结果如图:在浏原创 2020-09-08 22:23:25 · 285 阅读 · 0 评论 -
webpack配置文件最基本使用
如图:在项目根目录建立webpack.config.js文件文件内容如下:const path = require('path')//这个配置文件,起始就是一个JS文件,通过Node中的模块操作,向外暴露了一个配置对象module.exports = { //手动指定入口和出口 entry: path.join(__dirname,'/src/main.js'),//入口,表示要用webpack打包哪个文件 output: {//输出文件相关配置原创 2020-09-08 21:29:02 · 170 阅读 · 0 评论 -
webpack初步使用
1.webpack能够处理js文件的互相依赖关系;能够处理js的兼容问题,把高级的、浏览器不识别的语法,转为低级的浏览器能正常识别的语法一、新建项目如下包含最基本的css,js等,然后执行命令npm init -y初始化npm环境,如图:项目中会多出package.json文件将main.js用webpack构建到dist目录,使浏览器能识别es6语法...原创 2020-09-02 22:22:43 · 107 阅读 · 0 评论