webpack+lite-server 构建项目示例

首先安装以下库

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"},