首先安装以下库
npm install --save-dev webpack webpack-cli lite-server
npm install --save-dev babel-loader @babel/core @babel/preset-env
项目结构
webpack.config.js 配置
const path = require("path");module.exports = {entry: "./src/index.js",output: {filename: "bundle.js",path: path.resolve(__dirname, "dist"),},module: {rules: [{test: /\.js$/,exclude: /node_modules/,use:{loader:'babel-loader'}},],},mode:"development",devtool:"inline-source-map"
};
dist/index.html 加入以下内容
<script src="bundle.js" type="module"></script>
bs-config.json 设置访问文件夹
{"server":{"baseDir":"./dist"}
}
package.json 填入下列内容
"scripts": {"start": "lite-server","build":"webpack","dev":"webpack --watch & lite-server","test": "echo \"Error: no test specified\" && exit 1"},