您的位置:首页 >> Vue >> 《和小米一起学Vue.js》— webpack配置文件

《和小米一起学Vue.js》— webpack配置文件

[ 孤狼 | 2022-07-30 01:57:47 | Vue | 298°C | 0条评论 ]

在 webpack 中,可以无须任何配置使用,然而大多数项目会需要很复杂的设置,这就是为什么 webpack 仍然要支持 配置文件。这比在终端(terminal)中手动输入大量命令要高效的多,所以让我们创建一个取代以上使用 CLI 选项方式的配置文件 webpack.config.js

TIP:如果 webpack.config.js 文件存在,则 webpack 命令将默认选择使用它。如果想使用其他名称的配置文件,使用 --config 选项表明,可以传递任何名称的配置文件。这对于需要拆分成多个文件的复杂配置是非常有用。

--webpack.config.js
const path = require('path');
module.exports = {
mode: "production",
//所选模式告诉webpack相应地使用其内置优化。"production" | "development" | "none"
entry: "./src/main.js",
// 指定入口文件 string | object | array
output: {
// webpack 如何输出结果的相关选项
path: path.resolve(__dirname, "dist"), // string
// 所有输出文件的目标路径 , 必须是绝对路径(使用 Node.js 的 path 模块)
filename: "bundle.js", // string | array
// 出口文件名称
}
}

编写好配置文件之后,直接命令行运行 npx webpack 即可直接编译,无需其他参数 


引入其他文件

webpack 最出色的功能之一就是,除了 JavaScript,还可以通过 loader 引入任何其他类型的文件。也就是说,同样可以用来构建网站或 web 应用程序中的所有非 JavaScript 内容。  


加载 CSS

为了从 JavaScript 模块中 import 一个 CSS 文件,你需要在 module 配置中 安装并添加 style-loader css-loader 

运行命令来安装style-loader和css-loader

npm install --save-dev style-loader css-loader


修改main.js来引用css  

import css from 'global.css';


修改webpack.config.js  

const path = require('path');
module.exports = {
mode: "production",
//所选模式告诉webpack相应地使用其内置优化。"production" | "development" | "none"
entry: "./src/main.js",
// 指定入口文件 string | object | array
output: {
// webpack 如何输出结果的相关选项
path: path.resolve(__dirname, "dist"), // string
// 所有输出文件的目标路径 , 必须是绝对路径(使用 Node.js 的 path 模块)
filename: "bundle.js", // string | array
// 出口文件名称
},
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
}
}


webpack 根据正则表达式,来确定应该查找哪些文件,并将其提供给指定的 loader。在这种情况下,以 .css 结尾的全部文件,都将被提供给 style-loader 和 css-loader。

最后运行命令打包

npx webpack



代码下载

下载地址:  密码:b969




转载请注明出处:http://gl.paea.cn/n.php?n=182
 
如您看得高兴,欢迎随意投喂,让我们坚持创作!
赞赏一个鸡腿
还没有人留下遗迹
综合 · 搜索