We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
在 vue-cli中的配置
module.exports = { pluginOptions: { 'style-resources-loader': { preProcessor: 'less', patterns: [ // 这个是绝对路径,不能使用 alias中配置的别名路径,如@表示的src path.resolve(__dirname, './src/style/params.less') ] } }, …… 其他配置 …… }
在普通webpack 中的配置
module.exports = { // ... module: { rules: [{ test: /\.less$/, use: ['style-loader', 'less-loader', 'less-loader', { loader: 'style-resources-loader', options: { patterns: [ // 只有一条时也可以写成对象形式 path.resolve(__dirname, 'path/to/scss/variables/*.less'), path.resolve(__dirname, 'path/to/scss/mixins/*.less'), ], injector: 'append' // 如果在样式文件之后导入就加此行配置 } }] }] }, // ... }
const path = require('path'); module.exports = { // 安装 style-resources-loader 与 vue-cli-plugin-style-resources-loader pluginOptions: { 'style-resources-loader': { preProcessor: 'less', // 这三种 patterns 写法都是可以的 // patterns: ["./src/assets/reset1.less", "./src/assets/reset2.less"] // patterns: "./src/assets/reset.less" patterns: [ // 两种路径写法都可以,这里的路径不能使用 @ 符号,否则会报错 // path.resolve(__dirname, './src/assets/reset.less') path.resolve(__dirname, 'src/assets/reset.less') ] } } };
在配置 Loader 时需要注意的是:
use 属性的值需要是一个由 Loader 名称组成的数组,Loader 的执行顺序是由后到前的;
每一个 Loader 都可以通过 URL querystring 的方式传入参数,例如 css-loader?minimize 中的 minimize 告诉 css-loader 要开启 CSS 压缩。
在重新执行 Webpack 构建前要先安装新引入的 Loader:
npm i -D style-loader css-loader
style-loader 的工作原理大概是把 CSS 内容用 JavaScript 里的字符串存储起来, 在网页执行 JavaScript 时通过 DOM 操作动态地往 HTML head 标签里插入 HTML style 标签。也许你认为这样做会导致 JavaScript 文件变大并导致加载网页时间变长,想让 Webpack 单独输出 CSS 文件。
给 Loader 传入属性的方式除了有 querystring 外,还可以通过 Object 传入
给 Loader 传入属性的方式除了有 querystring 外,还可以通过 Object 传入,以上的 Loader 配置可以修改为如下:
use: [ 'style-loader', { loader:'css-loader', options:{ minimize:true, } } ]
除了在 webpack.config.js 配置文件中配置 Loader 外,还可以在源码中指定用什么 Loader 去处理文件。 以加载 CSS 文件为例,修改上面例子中的 main.js 如下:
require('style-loader!css-loader?minimize!./main.css');
这样就能指定对 ./main.css 这个文件先采用 css-loader 再采用 style-loader 转换。
webpack.config.js
const path = require('path'); module.exports = { // JS 执行入口文件 entry: './main.js', output: { // 把所有依赖的模块合并输出到一个 bundle.js 文件 filename: 'bundle.js', // 输出文件都放到 dist 目录下 path: path.resolve(__dirname, './dist'), }, module: { rules: [ { // 用正则去匹配要用该 loader 转换的 css 文件 test: /\.css$/, loaders: ['style-loader', 'css-loader'], } ] } };
show.js
// 操作 DOM 元素,把 content 显示到网页上 function show(content) { window.document.getElementById('app').innerText = 'Hello,' + content; } // 通过 CommonJS 规范导出 show 函数 module.exports = show;
main.js
// 通过 CommonJS 规范导入 css 模块 require('./main.css'); // 通过 CommonJS 规范导入 show 函数 const show = require('./show.js'); // 执行 show 函数 show('Webpack');
The text was updated successfully, but these errors were encountered:
No branches or pull requests
在 vue-cli中的配置
在普通webpack 中的配置
在配置 Loader 时需要注意的是:
use 属性的值需要是一个由 Loader 名称组成的数组,Loader 的执行顺序是由后到前的;
每一个 Loader 都可以通过 URL querystring 的方式传入参数,例如 css-loader?minimize 中的 minimize 告诉 css-loader 要开启 CSS 压缩。
在重新执行 Webpack 构建前要先安装新引入的 Loader:
npm i -D style-loader css-loader
style-loader 的工作原理大概是把 CSS 内容用 JavaScript 里的字符串存储起来, 在网页执行 JavaScript 时通过 DOM 操作动态地往 HTML head 标签里插入 HTML style 标签。也许你认为这样做会导致 JavaScript 文件变大并导致加载网页时间变长,想让 Webpack 单独输出 CSS 文件。
给 Loader 传入属性的方式除了有 querystring 外,还可以通过 Object 传入
给 Loader 传入属性的方式除了有 querystring 外,还可以通过 Object 传入,以上的 Loader 配置可以修改为如下:
除了在 webpack.config.js 配置文件中配置 Loader 外,还可以在源码中指定用什么 Loader 去处理文件。 以加载 CSS 文件为例,修改上面例子中的 main.js 如下:
require('style-loader!css-loader?minimize!./main.css');
这样就能指定对 ./main.css 这个文件先采用 css-loader 再采用 style-loader 转换。
webpack.config.js
show.js
main.js
The text was updated successfully, but these errors were encountered: