webpack 打包 src 目录
时间: 2023-07-22 14:17:16 浏览: 64
要使用Webpack打包`src`目录,您可以在Webpack配置中指定`entry`选项来告诉Webpack从哪里开始打包应用程序。这是一个简单的Webpack配置示例,它将`src`目录下的`index.js`文件作为入口文件:
```
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/dist',
filename: 'bundle.js'
}
};
```
这个配置将告诉Webpack从`src/index.js`文件开始打包应用程序,并将打包后的文件输出到`dist/bundle.js`中。
除了`entry`选项之外,您还需要在Webpack配置中指定输出目录和文件名。在上面的示例中,我们使用`output.path`和`output.filename`选项指定输出目录和文件名。在这个例子中,我们将打包后的文件输出到`dist`目录下,并将文件命名为`bundle.js`。
配置完成后,您可以运行Webpack打包您的应用程序,例如:
```
webpack --config webpack.config.js
```
这将启动Webpack,并使用`webpack.config.js`文件中的配置来打包您的应用程序。
相关问题
使用webpack打包vue项目时,不打包src目录下的pages文件夹
你可以在webpack的配置文件中,通过设置exclude属性来排除不需要打包的目录或文件。
假设你的src目录下有一个pages文件夹,你可以在webpack的module.rules数组中添加一个排除规则:
```javascript
module.exports = {
// ...其他配置
module: {
rules: [
// ...其他规则
{
test: /\.vue$/,
use: 'vue-loader'
},
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/ // 排除node_modules目录
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: {
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
use: {
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
use: {
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
},
{
test: /\.js$/,
use: 'babel-loader',
exclude: /pages/ // 排除pages目录
}
]
}
}
```
在上面的配置中,我们添加了一个排除规则,将所有src目录下的pages文件夹中的js文件排除在外,这样webpack在打包时就不会将这些文件打包进最终的输出文件中。
注意,如果你在使用import或require语句导入pages目录下的文件时,需要使用相对路径,并且确保路径的正确性。
webpack打包案例
您好!以下是一个简单的webpack打包案例:
首先,确保您已经安装了Node.js和npm。
1. 创建一个新的项目文件夹,并在文件夹中打开终端。
2. 初始化项目,创建一个package.json文件:
```
npm init -y
```
3. 安装webpack和webpack-cli:
```
npm install webpack webpack-cli --save-dev
```
4. 在项目文件夹中创建一个src文件夹,并在其中创建一个index.js文件作为入口文件。
5. 在index.js文件中编写一些代码,例如:
```javascript
console.log("Hello, webpack!");
```
6. 在项目根目录中创建一个webpack.config.js文件,并配置webpack:
```javascript
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};
```
7. 在终端中运行webpack命令进行打包:
```
npx webpack
```
8. 打包完成后,将生成的bundle.js文件输出到dist文件夹中。
这是一个简单的webpack打包案例,您可以根据自己的需求进行配置和扩展。希望对您有帮助!如果还有其他问题,请随时提问。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)