webpack 排除文件
时间: 2023-10-13 08:27:45 浏览: 32
在配置 webpack 的时候,可以使用 `exclude` 属性来排除某些文件或文件夹不被打包处理。
例如:
```javascript
module.exports = {
// ...
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
}
]
}
}
```
上面的配置表示,对于所有以 `.js` 结尾的文件,除了 `node_modules` 文件夹中的文件,都使用 `babel-loader` 进行处理。
除了在 loader 的配置中使用 `exclude` 属性,还可以在 `resolve` 属性中使用 `alias` 属性来指定某些文件或文件夹的别名,从而在打包时排除它们。
例如:
```javascript
module.exports = {
// ...
resolve: {
alias: {
'@common': path.resolve(__dirname, 'src/common')
}
}
}
```
上面的配置表示,将 `src/common` 文件夹的路径指定为 `@common`,在打包时就可以使用 `@common` 这个别名来引用该文件夹中的文件,从而排除它们不被打包。
需要注意的是,排除文件或文件夹可能会导致一些依赖无法被正确地处理,因此在使用时需要谨慎。
相关问题
webpack打包文件压缩
webpack打包文件压缩可以通过使用一些插件来实现。下面是两个常用的插件:
1. UglifyJsPlugin:通过压缩和混淆 JavaScript 代码来减小文件体积。
在 webpack 的配置文件中引入该插件,并将其添加到插件列表中,示例如下:
```javascript
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
// ...
optimization: {
minimizer: [
new UglifyJsPlugin({
// 在此处添加相关配置
}),
],
},
};
```
2. OptimizeCssAssetsWebpackPlugin:用于压缩 CSS 文件。
同样,在 webpack 的配置文件中引入该插件,并添加到插件列表中,示例如下:
```javascript
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
// ...
optimization: {
minimizer: [
new OptimizeCssAssetsWebpackPlugin({
// 在此处添加相关配置
}),
],
},
};
```
这些插件可以通过配置不同的选项来满足你的需求,例如设置压缩级别、保留注释、排除某些文件等。具体的配置选项可以根据文档进行调整。
webpack编译时排除md文件
可以在 webpack 配置文件中使用 exclude 属性来排除 md 文件的编译。
例如,假设你的 md 文件存放在 src/md 目录下,可以这样配置:
```
module.exports = {
// ...其他配置
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.md$/,
exclude: /node_modules/,
use: {
loader: 'raw-loader'
}
}
]
}
};
```
上面的配置意味着,对于以 .md 结尾的文件,将使用 raw-loader 来进行加载,而不进行其他的编译处理。同时,exclude 属性指定了不需要编译的文件夹,这里是 node_modules。