凉山州住房与城乡建设局网站,免费网站大全app,扬州网站建设哪个好薇,html菜鸟教程导航栏基本使用 本质上#xff0c;webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时#xff0c;它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)#xff0c;然后将你项目中所需的每一个模块组合成一个或多个 bundleswebpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)然后将你项目中所需的每一个模块组合成一个或多个 bundles它们均为静态资源用于展示你的内容。 功能介绍
基本来说Webpack本身的能力是有限的它分为两种模式 1、开发模式仅能编译 JS 中的 ES Module 语法 2、生产模式能编译 JS 中的 ES Module 语法还能压缩 JS 代码 但是我们平常写项目的时候并不只是有js还有其他的一些东西这次我就来分享一下处理样式资源的一些使用
基本配置
项目根目录所有指令必须在这个目录运行 └── src # 项目源码目录 ├── js # js文件目录 │ ├── count.js │ └── sum.js └── main.js # 项目主文件
下面我们来测试一下基本的Webpack打包的功能
文件内容
count.js
export default function count(x, y) {return x - y;
}sum.js
export default function sum(...args) {return args.reduce((p, c) p c, 0);
}main.js
import count from ./js/count;
import sum from ./js/sum;console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));初始化json文件
在跟目录的终端执行初始化package.json命令
npm init -y另外需要注意的是package.json中的name的属性不能叫做webpack 下载依赖
npm i webpack webpack-cli -DWebpack文件配置
在跟目录新建文件webpack.config.js
Webpack文件配置
// Node.js的核心模块专门用来处理文件路径
const path require(path);module.exports {// 入口// 相对路径和绝对路径都行entry: ./src/main.js,// 输出output: {// path: 文件输出目录必须是绝对路径// path.resolve()方法返回一个绝对路径// __dirname 当前文件的文件夹绝对路径path: path.resolve(__dirname, dist),// filename: 输出文件名filename: main.js,},// 加载器module: {rules: [],},// 插件plugins: [],// 模式mode: development, // 开发模式
};运行命令
npx webpack当看见跟目录里边出现一个dist文件夹就代表好了
处理样式资源
一、处理css
1、下载
npm i css-loader style-loader -D2、配置 {// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: [style-loader, css-loader],},3、添加css资源
在src文件夹中新建css文件夹在css文件夹中新建index.css文件
.box1 {width: 100px;height: 100px;background-color: pink;
}之后要在main.js中引入css
import ./css/index.css;4、查看结果
在跟目录中新建public文件夹在public文件夹中新建index.html
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titlewebpack5/title/headbodyh1Hello Webpack5/h1!-- 准备一个使用样式的 DOM 容器 --div classbox1/div!-- 引入打包后的js文件才能看到效果 --script src../dist/main.js/script/body
/html运行
npx webpack之后打开index.html文件查看结果即可
二、处理less
1、下载
npm i less-loader -D2、配置 {test: /\.less$/,use: [style-loader, css-loader, less-loader],},3、添加less资源
在src文件夹中新建less文件夹在less文件夹中新建index.js
.box2 {width: 100px;height: 100px;background-color: deeppink;
}在main.js中引入less
import ./less/index.less;4、查看结果
在html文件中添加 div classbox2/div运行命令查看结果
三、处理sass和scss
1、下载
npm i sass-loader sass -D2、配置 {test: /\.s[ac]ss$/,use: [style-loader, css-loader, sass-loader],},3、添加sass资源
在src文件夹中新建sass文件夹在sass文件夹中新建index.sass和index.scss index.sass
.box3width: 100pxheight: 100pxbackground-color: hotpinkindex.scss
.box4 {width: 100px;height: 100px;background-color: lightpink;
}在main.js中引入
import ./sass/index.sass;
import ./sass/index.scss;4、查看结果
在index.html中添加 div classbox3/divdiv classbox4/div运行命令查看结果
四、处理styl资源
1、下载
npm i stylus-loader -D2、配置 {test: /\.styl$/,use: [style-loader, css-loader, stylus-loader],},3、添加styl资源
在src下新建styl文件夹在styl文件夹中新建index.sty文件
.box width 100px height 100px background-color pink在main.js中引入
import ./styl/index.styl;4、查看结果
在index.html中添加
div classbox/div运行查看结果
总结
这周的总结就先到这里之后会逐渐分享其它资源的Webpack配置
