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"
  },
相关推荐
巴博尔1 天前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app
Asthenia04121 天前
技术复盘:从一次UAT环境CORS故障看配置冗余的危害与最佳实践
前端
csj501 天前
前端基础之《React(1)—webpack简介》
前端·react
被巨款砸中1 天前
前端 20 个零依赖浏览器原生 API 实战清单
前端·javascript·vue.js·web
文韬_武略1 天前
web vue之状态管理Pinia
前端·javascript·vue.js
mosen8681 天前
【Vue】Vue Router4x关于router-view,transtion,keepalive嵌套写法报错
前端·javascript·vue.js
写不来代码的草莓熊1 天前
vue前端面试题——记录一次面试当中遇到的题(5)
前端
weixin_ab1 天前
【HTML分离术】
前端·html
文心快码BaiduComate1 天前
新手该如何选择AI编程工具?文心快码Comate全方位体验
前端·后端·程序员
夫唯不争,故无尤也1 天前
Tomcat 内嵌启动时找不到 Web 应用的路径
java·前端·tomcat