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