webpack build 没有css
时间: 2023-10-25 08:22:50 浏览: 39
webpack build 没有 css 可能是因为在 webpack 的配置文件中没有对 css 进行相应的处理。要在 webpack 中处理 css,需要安装 css-loader 和 style-loader,并在配置文件中添加相应的 loader 配置。
具体来说,可以按照以下步骤进行配置:
1. 在项目中安装 css-loader 和 style-loader:
```
npm install --save-dev css-loader style-loader
```
2. 在 webpack 配置文件中添加 loader 配置:
```
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
```
这个配置的含义是,在遇到文件名以 .css 结尾的文件时,先使用 css-loader 处理 css,再使用 style-loader 将 css 插入到 HTML 文件中。
3. 确保在 webpack 配置文件中正确引入了 css 文件。
通过以上步骤,应该可以解决 webpack build 没有 css 的问题。希望能对你有所帮助!
相关问题
webpack build 打包前缀
如果你想在打包后的文件路径前加上前缀,可以使用 `publicPath` 配置项。在 webpack 的配置文件中,将 `output` 对象中的 `publicPath` 属性设置为需要的前缀即可。
例如,如果你想要将打包后的文件路径前加上 `/dist/` 前缀,可以这样配置:
```javascript
module.exports = {
output: {
publicPath: '/dist/'
}
}
```
这样,在打包后生成的 HTML 文件中引用的资源路径就会变成 `/dist/bundle.js`、`/dist/style.css` 等。
注意:`publicPath` 的值应该以斜杠 `/` 开头和结尾,以确保生成的路径正确。
webpack的build
webpack的build是指将项目源代码打包成可在浏览器中运行的静态资源的过程。在webpack中,可以通过配置文件来定义入口文件、出口文件以及各种loader和plugin,从而实现对项目源代码的打包。以下是一个简单的webpack配置文件示例:
```javascript
const path = require('path');
module.exports = {
entry: './src/index.js', // 入口文件
output: {
filename: 'bundle.js', // 出口文件
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/, // 对css文件使用css-loader和style-loader
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|svg|jpg|gif)$/, // 对图片文件使用file-loader
use: ['file-loader']
}
]
}
};
```
在配置好webpack.config.js文件后,可以使用以下命令进行打包:
```shell
npx webpack
```
执行完该命令后,webpack会根据配置文件对项目源代码进行打包,并将打包后的静态资源输出到指定的出口文件中。