webpack
Leisure Tea
这个作者很懒,什么都没留下…
展开
-
webpack9-Vue中使用vue-router
webpack9-Vue中使用vue-router 1. 初始化npm ``` npm init -y ``` 2. 安装 npm i webpack webpack-cli webpack-dev-server html-webpack-plugin -D 3. 安装vue等 npm i vue vue-router -S npm i vue-loader vue-template-com...原创 2020-01-02 23:21:08 · 187 阅读 · 0 评论 -
webpack8-Vue的runtime下渲染单文件组件
webpack8-Vue的read-only下渲染单文件组件 一、怎么在Vue的read-only下渲染单文件组件? 使用render来渲染单文件组件。 二、步骤 初始化npm npm init -y 安装 npm i webpack webpack-cli webpack-dev-server html-webpack-plugin -D 安装Vue npm i vue -S ...原创 2020-01-02 16:35:44 · 280 阅读 · 0 评论 -
webpack7-Vue
webpack7-Vue 一.npm初始化 npm init -y 二.安装 npm i webpack webpack-cli webpack-dev-server html-webpack-plugin -D npm i jquery -S 三.安装Vue npm i vue -S 四.导入Vue 4.1 方式1: 在入口js文件中 import Vue from “vue/dist/vue...原创 2020-01-02 15:30:07 · 251 阅读 · 1 评论 -
Vue-组件6 使用render来渲染组件
Vue-组件6 使用render来渲染组件 一、注意 render渲染组件,会把一整个el指定的元素都替换为组件。 二、代码示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> &...原创 2020-01-02 14:24:23 · 380 阅读 · 0 评论 -
webpack6-babel的基本使用
webpack6-babel的基本使用 一、Babel有什么用? 因为webpack默认只支持部分的ES6代码,为了使用ES6更高级的代码(如class),用Babel实现 二、使用Babel需要的包 npm i babel-core babel-loader babel-plugin-transform-runtime -D npm i babel-preset-env babel-prese...原创 2020-01-02 13:53:43 · 401 阅读 · 1 评论 -
webpack4.2-[url-loader]
webpack4.2-[url-loader] 一、url-loader有什么用? 用来加载有关url的路径或文件 二、步骤 本示例在css中使用url npm初始化 npm init -y 安装webpack webpack-cli webpack-dev-server npm i webpack webpack-cli webpack-dev-server --save-dev ...原创 2020-01-02 10:10:08 · 311 阅读 · 1 评论 -
webpack5-[html-webpack-plugin]的使用
webpack5-[html-webpack-plugin]的使用 一、为什么要用 html-webpack-plugin 插件,这个插件有什么用? html-webpack-plugin 插件可以在内存中生成 html 文件 html-webpack-plugin 插件可以在生成的文件中自动帮我们导入合适的js文件 二、步骤 初始化 npm init -y 安装 npm i webp...原创 2019-12-31 15:10:57 · 2102 阅读 · 0 评论 -
webpack4.1-loader之css
webpack4-loader之css 一、为什么要用loader? 因为webpack的js文件中默认只能打包加载js模块,例import $ from ‘jquery’,而不能加载css等其他文件 所以需要loader工具帮助我们在js文件中打包加载css文件 二、打包加载css文件的loader是哪几个? style-loader 和 css-loader 三、步骤 npm初始化,安装...原创 2019-12-31 14:32:55 · 127 阅读 · 0 评论 -
webpack3-[webpack-dev-server]的使用
webpack3-[webpack-dev-server]的使用 搭建项目 webpack-dev-server有什么用? 可以用来自动打包编译 通用步骤 npm init -y npm i webpack --save-dev npm i webpack-cli --save-dev npm i jquery -d 安装 webpack-dev-server npm i webpa...原创 2019-12-30 17:17:46 · 377 阅读 · 0 评论 -
webpack2-最基本配置文件的使用
webpack2-最基本配置文件的使用 webpack 命令 最基本配置文件的使用 通过 webpack 命令打包 1.在根目录下创建webpack.config.js文件 2.编写webpack.config.js文件 const path = require(‘path’) module.exports = { entry: path.join(__dirname, ‘./src/js/my...原创 2019-12-30 16:25:03 · 162 阅读 · 0 评论 -
webpack1-打包流程
webpack1-打包流程 初始化 命令:npm init -y 生成的文件:package.json 在package.json中的scripts中添加 “dev”: “webpack --mode development” “build”: “webpack --mode production” 安装webpack 2.1 安装全局webpack,安装过全局的webpack则跳过此...原创 2019-12-30 14:11:26 · 187 阅读 · 0 评论