初始化：npm init -y安装webpacknpm install webpack webpack-cli --save-dev安装vuenpm i --save-dev vue vue-loader vue-template-compiler 安装css的插件npm install --save-dev style-loader css-loader...
原创
2021-07-05 13:48:48
481阅读
前戏 Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要结合插件来使用，这些插件在Webpack 中被称为 Loader （加载器） 来进行转换。 Loader 可以理解为是模块和资源的转换器，它本身是一个函数，参数接受的是源文件， 返回值是转换后的结果。 这
原创
2022-07-07 10:45:41
386阅读
Loaders cnpm install vue-loader@14 vue-template-compiler --save-dev webpack.config.js module: { rules: [{ test: /\.vue$/, use: ['vue-loader'] }], }, A
转载
2021-07-07 16:44:00
108阅读
Loaders cnpm install vue --save webpack.config.js resolve: { // 解决运行时报错 alias: { 'vue$': 'vue/dist/vue.esm.js' } } 使用 import Vue from "vue";
转载
2021-07-07 14:36:00
61阅读
1、安装插件 common.css为： flex.css为： app.js为： 4、执行编译&查看结果
转载
2017-09-15 10:49:00
175阅读
2评论
私有前缀postcss-loader(样式处理工具) autoprefixer(私有前缀的插件)npm install postcss-loader autoprefixer -D//postcss.config.jsmodule.exports = {plugins: [require('autoprefixer')
]
}复制代码//.browserslistrccover 99.5
转载
2021-01-24 20:35:30
235阅读
2评论
cnpm install webpack@^5.23.0 --save-dev cnpm i webpack-cli@^4.5.0 --save-dev cnpm i less-loader@6.0.0 --save-dev cnpm i style-loader --save-dev cnpm i
转载
2021-07-07 11:01:00
174阅读
2评论
1、编写src/css/main.css#app a{ display: inline-block; width: 150px; line-height: 30px; background-color: dodgerblue; col...
原创
2023-07-17 14:22:54
72阅读
css文件处理-准备工作 (以下项目配置都是基于上一篇webpack(4)的基础上) 在项目开发中，我们必然需要添加很多的样式，而样式我们往往写到一个单独的文件中。 这里我们就在src目录中创建一个normal.css文件，代码如下： body{ background-color: aqua; }
原创
2021-07-13 11:08:12
1028阅读
If you try to use CSS Modules in TypeScript the same way you would use them in JavaScript, with webpack’s css-loader, you’ll see an error: ”TS2307: Ca
转载
2018-01-26 20:13:00
154阅读
2评论
（1）预备备① webpack3.8.1 安装 详见：http://blog.csdn.net/fanfan4569/article/detailsvar ExtractTextPlugin = req...
原创
2022-10-21 16:20:27
790阅读
前言 如果我们想在webpack中使用vue，就需要在webpack中配置vue 配置vue 首先，我们需要在项目中安装vue，安装命令如下： npm install vue --save 安装完成后，我们在主入口main.js文件中导入vue并创建一个实例 import Vue from 'vue
原创
2021-07-13 11:05:34
277阅读
文章目录前言一、使用webpack来进行vue-cli模块化开发二、Webpack配置区分开发环境和生产环境三、vue项目打包3.1
原创
2022-05-10 10:26:25
1407阅读
点赞
Webpack是一个现代JS应用的静态模块打包的工具 学习Webpack需要我们安装NodeJS 配置CNPM & CRM 使用切换镜像的方式配置：【不建议】 npm config set registry http://registry.npm.taobao.org 安装镜像管理工具： npm i
转载
2020-07-24 21:52:00
128阅读
2评论
1.安装webpack项目环境bashnpminstallwebpacksavedev2.安装css的loaderbashnpminstallsavedevcssloader3.安装style的loaderbashnpminstallsavedevstyleloader
原创
2021-12-29 17:58:22
225阅读
Webpack作用：Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分ack-cli -vWebpack的配置：创
原创
2022-12-09 12:02:44
120阅读
8.webpackWebpack 是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包。中文官方网站：https://www.webpackjs.com/官网给出的解释：本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)
原创
2022-03-04 15:39:42
68阅读
1、项目根目录初始化package.json: npm init2、下载css与style的loader配置webpack中的css解析npm install css-loader style-loader --save-dev3、下载babel，webpack配置es6语法npm install babel-core babel-loader babel-plugin-transform-
原创
2022-11-20 00:41:19
101阅读
如果我们需要在应用中添加 css 文件，就需要使用到 css-loader 和 style-loader，他们做两件不同的事情，css-loader 会遍历 CSS 文件，然后找到 url() 表达式然后处理他们，style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中 ...
转载
2021-10-25 13:51:00
138阅读
2评论
CSS 模块 Tree-Shaking 不光 JS 模块可以进行 Tree-Shaking, CSS 模块也可以进行 Tree-Shaking 开启 CSS 模块 Tree-Shaking 官方文档地址：https://github.com/webpack-contrib/purifycss-web
原创
2021-12-09 23:51:00
196阅读
