从无到有搭建前端项目

最新推荐文章于 2023-12-20 15:52:45 发布

叨槿

最新推荐文章于 2023-12-20 15:52:45 发布

阅读量274

点赞数

分类专栏： javascript 文章标签：前端 webpack javascript

本文链接：https://blog.csdn.net/jyj15002967882/article/details/122458081

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.github创建项目，clone到本地

git clone "xxxxxxxx"
cd my_project

2.npm 初始化项目(入口文件写 src/index.js)

npm init

在这里插入图片描述

3.创建几个文件夹

mkdir src build test doc example

4.新建 src/index.js 文件

alert('hello world')

5.安装webpack和babel插件

npm i babel-core babel-loader babel-polyfill babel-preset-es2015 babel-preset-latest webpack webpack-cli --save-dev

查看 package.json

{
  "name": "my_project",
  "version": "0.0.1",
  "description": "README",
  "main": "src/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "xxxxxxxx/my_project.git"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-latest": "^6.24.1",
    "webpack": "^4.7.0",
    "webpack-cli": "^3.1.2"
  }
}

6.新建 .babelrc 文件

{
    "presets": ["es2015", "latest"],
    "plugins": []
}

7. 新建 webpack.config.js 文件，配置webpack

module.exports = {
    entry: "./src/index.js",
    output: {
        path: __dirname,
        filename: "./build/bundle.js"
    },
    module: {
        rules: [{
            test: /\.js?$/,
            exclude: /(node_modules)/,
            loader: "babel-loader"
        }]
    }
}

8. package.json 添加build脚本

"build": "webpack"

9. 装http-server服务

npm install http-server -g

10.package.json 添加启动服务命令

"start": "http-server -p 8080"

11.example文件夹中创建 index.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>come</title>
</head>
<body>
    <p>hello, wo lai le</p>
    
    <script src="../release/bundle.js"></script>
</body>
</html>

12. 运行http服务

npm run start

13.浏览器查看运行结果

访问 http://localhost:8080/example/index.html 查看结果：
在这里插入图片描述

叨槿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
从无到有搭建前端项目

1.github创建项目，clone到本地git clone "xxxxxxxx"cd my_project2.npm 初始化项目(入口文件写 src/index.js)npm init 3.创建几个文件夹mkdir src build test doc example4.新建 src/index.js 文件alert('hello world')5.安装webpack和babel插件npm i babel-core babel-loader babel-polyfill ba
复制链接

扫一扫