webpack 引入静态js
时间: 2023-06-28 14:15:02 浏览: 55
要在webpack中引入静态JS文件,可以使用以下步骤:
1. 在webpack的配置文件中,添加一个entry选项,指定要引入的JS文件的路径。
2. 在webpack的配置文件中,添加一个output选项,指定打包后的文件的输出路径。
3. 在JS文件中,使用ES6的import语句引入其他模块或库。
例如,假设要引入一个名为“test.js”的静态JS文件,可以按照以下步骤进行配置:
1. 在webpack的配置文件中,添加以下代码:
```javascript
module.exports = {
entry: './src/test.js',
output: {
path: __dirname + '/dist',
filename: 'test.bundle.js'
}
};
```
这里将“test.js”文件作为入口文件,输出文件名为“test.bundle.js”,并将打包后的文件输出到“dist”目录下。
2. 在“test.js”文件中,使用以下代码引入其他模块或库:
```javascript
import $ from 'jquery';
$('body').text('Hello world!');
```
这里使用ES6的import语句引入了jquery库,并在页面上输出“Hello world!”。然后在页面中引入打包后的“test.bundle.js”文件即可。
相关问题
webpack 默认静态资源加载
webpack默认只能解析JavaScript文件,如果需要加载和解析其他类型的文件,就需要使用loader。loader的作用是将非JavaScript文件转换为webpack能够处理的模块,以便于打包和使用。常见的loader有css-loader、file-loader、url-loader等。
另外,webpack还提供了一些插件来优化打包过程和输出结果。例如,CleanWebpackPlugin可以在每次打包前清除输出目录,HtmlWebpackPlugin可以自动生成HTML文件并自动引入打包后的资源。
webpack静态打包
Webpack 是一个现代的静态资源打包工具。它可以将多个 JavaScript 文件、CSS 文件、图片等静态资源打包成一个或多个文件,使得网页加载速度更快、交互更流畅。下面是使用 Webpack 进行静态打包的步骤:
1. 安装 Webpack:在命令行中使用 npm 安装 webpack 和 webpack-cli。
```
npm install webpack webpack-cli --save-dev
```
2. 新建一个 webpack.config.js 文件,配置入口和出口。
```javascript
const path = require('path');
module.exports = {
entry: './src/index.js', // 入口文件
output: {
filename: 'bundle.js', // 打包后的文件名
path: path.resolve(__dirname, 'dist') // 打包后的目录
}
};
```
3. 在终端中运行 webpack 命令进行打包。
```
npx webpack
```
4. 在 index.html 中引入打包后的文件。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack Demo</title>
</head>
<body>
<script src="dist/bundle.js"></script>
</body>
</html>
```
这样就完成了 Webpack 的静态打包。