首先webpack是一个模块打包机,本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
webpack的配置文件webpack.config.js
const path = require('path');
module.exports = {
entry: './app/main.js', //配置入口文件位置
output:{
path: path.resolve(__dirname, 'dist'), //输出文件位置
filename: 'bundle.js', //打包后的文件名称
publicPath: 'public' //虚拟目录
},
module: {
rules: [
test: /\.jsx?$/,//匹配以js或jsx结尾的文件
exclude: [
path.resolve(__dirname, 'node_modules') //配置过滤目录
],
loader: 'babel-loader', //配置loader加载器
options: {
preset: [es2015]
}
]
}
};
项目目录如下
webpack-dev-server的使用,配置package.json,
// package.json的scripts模块
"scripts": {
"test": "node test.js",
"server": "webpack-dev-server --content-base ./ --port 8000" //./指的项目入口文件的位置
},
使用npm run server启动webpack-dev-server。
index.js文件内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue学习</title>
</head>
<body>
//根据webpack的配置文件引入打包后的bundle.js
<script src="public/bundle.js"></script>
</body>
</html>