webpack
关注
分享
扫一扫
一个前端模块化打包工具
tianmeng1999
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
react-create-app 基于 react-app-rewired scss设置全局变量全局函数
目录重写react脚手架配置使用 scss引用全局 scss 文件中的变量和函数应用全局测试重写react脚手架配置customize-cra 合并配置react-app-rewired 重写react脚手架配置安装依赖npm i customize-cra react-app-rewired -D在项目根目录下创建 config-overrides.js 文件使用 scss安装 sass npm i sass -D引用全局 scss 文件中的变量和函数应用全局npm i sass-re原创 2022-02-21 11:43:46 · 1677 阅读 · 0 评论 -
webpack + TypeScript搭建工程
工程搭建环境：浏览器 + 模块化webpack: 构建工具，更据人口文件找寻依赖关系，打包安装 npm i webpack webpack-cli -D安装插件npm i -D html-webpack-plugin clean-webpack-plugin webpack-dev-serverwebpack.config.js配置devServer: { open: true, port: 8000},配置命令"scripts": { "start": "npx原创 2021-09-30 14:32:33 · 415 阅读 · 0 评论 -
vue-cli 别名配置 alias
vue-cli2配置build/webpack.base.conf.jsresolve: { extensions: ['.js', '.vue', '.json'], alias: { '@': resolve('src'), // 配置路径别名 @/components/HelloWorld 'assets': resolve('src/assets'), 'components': resolve('src/components'),原创 2020-09-02 14:14:10 · 3564 阅读 · 0 评论 -
vue-cli2 目录结构解析 关闭esline
文章目录结构入口package.json 命令npm run build 打包项目npm run dev 运行项目build/config文件夹build文件夹下是webpack 相关的配置config文件夹下是一些变量node_modules 项目依赖第三方包src 开发文件夹assetsstatic 静态资源文件夹.gitkeep.babelrc.editorconfig.eslintignore.eslintrc.js.gitignore.postcssrc.jsindex.html 模版文件pac原创 2020-08-22 10:36:53 · 592 阅读 · 0 评论 -
webpack 配置分离 webpack-merge webpack指定运行文件(不运行webpack.config.js)
webpack-merge 对配置文件进行合并npm i webpack-merge --save-dev分离原webpack.config.jsconst path = require('path')const webpack = require('webpack')const vueLoaderPlugin = require('vue-loader/lib/plugin')const HtmlWebpackPlugin = require('html-webpack-plugin');原创 2020-08-21 14:08:33 · 517 阅读 · 0 评论 -
webpack plugin 搭建本地服务器 实现实时刷新 webpack-dev-server
文章目录webpack-dev-server安装配置 webpack.config.js配置 dev命令 npm run dev运行package.jsonwebpack-dev-server安装npm i [email protected] --save-dev配置 webpack.config.jsdevserver:{ contentBase:为那一个文件夹提供本地服务，默认是跟文件夹 port:端口号 inline:页面实时刷新 historyApiFallback原创 2020-08-21 10:21:12 · 158 阅读 · 0 评论 -
webpack plugin js压缩 uglifyjs-webpack-plugin
文章目录uglifyjs-webpack-plugin安装配置打包效果uglifyjs-webpack-plugin会把版权插件内容 给去掉 BannerPluginuglifyjs：丑陋对js代码进行压缩安装使用1.1.1版本，和vue-cli2保持一致npm i [email protected] --save-dev配置const uglifyjsPlugin = require('uglifyjs-webpack-plugin');plugins:[原创 2020-08-21 09:59:05 · 758 阅读 · 0 评论 -
webpack plugin html模版配置HtmlWebpackPlugin
HtmlWebpackPlugin会自动生成一个index.html文件（可以指定模版）将打包的js自动通过 script 标签引入到 body中安装npm i [email protected] --save-dev配置 webapck.config.jsconst HtmlWebpackPlugin = require('html-webpack-plugin')...plugins:[ new HtmlWebpackPlugin({ template:'in原创 2020-08-21 09:42:59 · 387 阅读 · 0 评论 -
webpack plugin插件 loader和plugin区别 使用BannerPlugin(版权说明)
文章目录plugin 是什么loader 和 plugin 的区别plugin 的使用plugin 使用示例 BannerPlugin版权插件配置效果plugin 是什么plugin是插件的意思，通常用于对某个现有的架构进行扩展。webpack 中的插件，就是对webpack现有功能的扩展，比如打包优化、文件压缩等等。loader 和 plugin 的区别loader 主要用于转换某些类型的模块，他是一个转换器。plugin 是插件，它是对webpack本身的扩展，是一个扩展器。plug原创 2020-08-20 19:11:18 · 434 阅读 · 0 评论 -
webpack 配置vue优化解析 解析编译vue文件
文章目录目录结构简化流程初始写法简化1 配置template简化2 配置组件简化3 组件对象抽离js 使用模块化简化 4 使用vue文件 实现 结构 样式 行为分离接近脚手架mian.js写法 使用 render 渲染模版解析编译vue文件安装loader配置webpack webpack.config.jspackage.jsonindex.htmlmain.jsApp.vue打包效果目录结构简化流程初始写法index.html<!DOCTYPE html><html l原创 2020-08-20 10:53:37 · 1190 阅读 · 0 评论 -
webpack vue配置使用 不包括解析vue文件
文章目录目录结构index.htmlmain.js安装使用安装webpack 配置package.json打包效果目录结构index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t原创 2020-08-20 10:00:32 · 502 阅读 · 0 评论 -
webpack es6转es5 babel-loader
文章目录目录结构js/cs.jsmian.jsindex.html安装使用安装package.json配置loader打包运行效果目录结构js/cs.jsconst cs = 'es6语法'const csFun = ()=>{ console.log("'es6语法'")}module.exports = { cs,csFun}mian.js// 入口文件import {cs, csFun } from './js/cs'console.log("cs",cs)原创 2020-08-19 21:56:55 · 331 阅读 · 0 评论 -
webpack loader 处理图片文件 url-loader file-loader
文章目录文件目录main.jsrest.cssless.lessinde.html安装使用 小图片安装package.json配置loader打包运行大图片处理安装rest.css文件目录main.js// 入口文件// 导入css依赖import './css/rest.css'// 导入less依赖import './css/less.less'rest.cssbody{ background: url('../img/ff.jpg');}less.less原创 2020-08-19 21:22:44 · 571 阅读 · 0 评论 -
webpack less打包
文章目录文件目录less.lessmain.jsindex.html安装使用安装生成 package.json配置打包命令配置 loader-less打包运行效果文件目录less.less@width: 10px;@color: red;body{ background-color: @color; width: @width;}main.js// 导入less依赖import './css/less.less'index.html<!DOCTYPE htm原创 2020-08-18 14:42:36 · 855 阅读 · 0 评论 -
webpack loader css打包示例
文章目录loader是什么loader使用安装需要使用的loader在webpack.config.js中的 module 关键字下配置css打包示例 把css打包到build.js项目目录安装配置使用loader是什么是webpack中的一个非常核心的概念 是webpack功能的扩展webpack本身只能处理js，并且webpack会自动处理js之间的依赖使用loader 后可以对其它资源进行处理打包.如es6转es5, sass、less转css，将.jsx.vue 文件转换成js文件等等，原创 2020-08-18 13:57:12 · 296 阅读 · 0 评论 -
webpack 初入 简单打包示例 配置命令npm run xxx gulp和webpack的区别
文章目录webpack是什么打包gulp和webpack的区别webpack安装webpack起步 最基本使用 简单打包示例(js模块化打包)webpack配置使用 简化命令 npm run xxxpackage.json scripts 执行脚本 文件执行webpack是什么从本质上来讲，webpack 是一个现代的javaScript 应用的静态模块打包工具。是一个前端模块化打包工具模块化 打包webpack其中一个核心就是让我们可能进行模块化开发，并且帮我们处理模块间的依赖关系。而原创 2020-08-18 11:47:30 · 1029 阅读 · 0 评论