![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Webpack
文章平均质量分 54
可乐雪碧薄荷糖
这个作者很懒,什么都没留下…
展开
-
Webpack-8【Webpack引入库、字体文件、imports-loader】
一.Webpack引入库npm i bootstrap@3.3.7 -Dindex.js中import 'bootstrap/dist/css/bootstrap.css'index.html<div id="app"> <ul class="list-group"> <li class="list-group-item"></li> </ul></div>原创 2021-03-05 21:52:22 · 188 阅读 · 0 评论 -
Webpack-7【生成HTML、提取CSS、清除文件】
一.生成HTMLHtmlWbpackPluginoptions:template:本地模板文件的位置filename:输出文件的文件名称minify:压缩代码chunks:允许插入到模板中的一些chunkinject:向template或者templateContent中主入所有静态资源var path = require('path');var HtmlWebpackPlugin = require('html-webpack-plugin');module.ex原创 2021-03-05 21:48:56 · 170 阅读 · 0 评论 -
Webpack-6【Less-Sass、postcss、图片处理】
一.Less-SassLess: 是一门CSS预处理语言,它扩展了CSS语言,增加了变量,Mixin,函数等特性Sass:是成熟、稳定、强大的CSS扩展语言npm install less less-loader -Dnpm install node-sass sass-loader -Dmodule:{ rules:[{ test:/\.less$/, use:[{ loader:'style-loader'原创 2021-03-02 17:57:30 · 160 阅读 · 0 评论 -
Webpack-5【babel编译ES6、编译插件、全局-局部垫片】
一.Webpack处理CSSstyle-loader 是为了在html中以style得方式嵌入csscss-loader 通过require的方式来引入css编译顺序是先用css-loader将css代码编译,再交给style-loader插入到网页里面去file-loader 将文件(一般是图片文件为主,其他的包括字体文件等),在进行一些处理后移动打包后的目录中module:{ rules:[{ test:/\.css$/, use:[{原创 2021-03-02 17:53:06 · 890 阅读 · 1 评论 -
Webpack-4【babel编译ES6、编译插件、全局-局部垫片】
一.babel编译ES6babel-core:封装了babel编译时需要使用的APIbabel-loader:负责es6语法转化,webpack打包时使用babel-loader处理javascript文件npm install babel-loader @babel/core -Dnpm install babel-loader @7.1.5 babel-core -Dbabel-loader 8.x对应 babel-core7.xbabel-loader 7.x对应 babel-原创 2021-03-02 17:47:44 · 374 阅读 · 0 评论 -
Webpack-3【零配置、模块化规范、webpack-dev-server】
一.零配置模块化规范、webpack-dev-server(1).file-loadernpm install file-loader --save-devconst path = require('path');module.exports = { entry:'./src/index.js', module:{ rules:[ { test: /\.(png|jpe?g|gif)$/,原创 2021-03-01 19:49:31 · 186 阅读 · 0 评论 -
Webpack-2【JS模块化、Webpack模块化、CSS模块化概念】
一.JS模块化CommonJs模块化规范引入const Header = require('header.js')抛出module.exports = Header;二.Webpack模块化webpack只知道模块相关的事情,是个模块打包的工具webpack支持模块的类型 js css vue png jpg三.CSS模块化webpack.config.jsconst path = require('path')module.expor原创 2021-03-01 19:45:53 · 160 阅读 · 0 评论 -
Webpack-1【Webpack的基本安装使用】
一.安装及使用npm initnpm install webpack@4.41.2 webpack-cli@3.10 -Dnpx webpack index.js//翻译引入//ES Moduleimport Header from './Header.js'import Content from './Header.js'import Footer from './Header.js'new Header();new Content();new Footer();原创 2021-03-01 19:44:04 · 181 阅读 · 1 评论