{"id":20220004,"url":"https://github.com/xpoet/webpack-es6-dev-starter","last_synced_at":"2026-05-06T18:33:30.152Z","repository":{"id":41597651,"uuid":"282122714","full_name":"XPoet/webpack-es6-dev-starter","owner":"XPoet","description":"从零开始搭建 Webpack ES6 开发环境模板","archived":false,"fork":false,"pushed_at":"2023-01-07T02:01:06.000Z","size":401,"stargazers_count":1,"open_issues_count":6,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-13T22:42:13.694Z","etag":null,"topics":["babel","es6","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/XPoet.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null}},"created_at":"2020-07-24T04:28:51.000Z","updated_at":"2022-08-02T03:31:05.000Z","dependencies_parsed_at":"2023-02-06T10:32:05.480Z","dependency_job_id":null,"html_url":"https://github.com/XPoet/webpack-es6-dev-starter","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/XPoet%2Fwebpack-es6-dev-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/XPoet%2Fwebpack-es6-dev-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/XPoet%2Fwebpack-es6-dev-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/XPoet%2Fwebpack-es6-dev-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/XPoet","download_url":"https://codeload.github.com/XPoet/webpack-es6-dev-starter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241661406,"owners_count":19998949,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","es6","webpack"],"created_at":"2024-11-14T06:44:34.030Z","updated_at":"2026-05-06T18:33:30.110Z","avatar_url":"https://github.com/XPoet.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Webpack 搭建 ES6 开发环境\n\n从零开始，使用 Webpack 搭建 ES6 开发环境。\n\n## 安装模块\n\n### 创建 package.json 文件\n```bash\nnpm init -y\n```\n\n### 安装 webpack\n```bash\nnpm install webpack webpack-cli --save-dev\n```\n\n### 安装 babel\n```bash\nnpm install babel-loader @babel/core @babel/preset-env --save-dev\n```\n\n### 安装 CSS 加载器\n```bash\nnpm install css-loader style-loader --save-dev\n```\n\n### 安装 HTML 插件\n```bash\nnpm install html-webpack-plugin --save-dev\n```\n\n## 创建目录结构\n\n### 项目目录结构介绍\n```\n- project [ 根目录 ]\n​ – node_modules [ 项目中的依赖存放目录 ]\n​ – public [ 静态资源文件目录 ]\n​ – src [ 项目源文件目录 ]\n​ – dist [ 打包文件目录 ]\n​ – webpack.config.js [ webpack配置文件 ]\n​ – package.json [ NPM包管理配置文件 ]\n - ...\n - ...\n```\n\n### public 目录\n\n在 public 目录下，创建 index.html，该文件为项目的默认首页。\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003ctitle\u003eTitle\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### src 目录\n在 src 目录下，创建 index.js，该文件为项目的入口文件，在此文件中可以编写 ES6 代码。\n\n### webpack.config.js 文件\n\n在项目的根目录下创建 webpack.config.js 配置文件，依次完成以下配置：\n\n- 配置入口（entry）\n  ```js\n  module.exports = {\n      entry: './src/index.js'\n  }\n  ```\n\n- 配置出口（output）\n  ```js\n  const path = require('path');\n  module.exports = {\n      //...\n      output: {\n          path: path.resolve(__dirname, 'dist'),\n          filename: 'main.js'\n      }\n  }\n  ```\n  \n- 配置加载器（loader）\n  ```js\n  module.exports = {\n    module: {\n      rules: [\n        {\n          test: /\\.css$/,\n          use: ['style-loader', 'css-loader']\n        },\n        {\n          test: /\\.js?$/, // js 或 jsx 文件的正则\n          exclude: /node_modules/, // 排除 node_modules 文件夹\n          use: {\n            // loader 是 babel\n            loader: 'babel-loader',\n            options: {\n              // babel 转义的配置选项\n              babelrc: false,\n              preset: [\n                [require.resolve('@babel/preset-env'), {modules: false}]\n              ],\n              cacheDirectory: true\n            }\n          }\n        }\n      ]\n    }\n  }\n  ```  \n  \n- 配置插件（plugin）\n  ```js\n  const HtmlWebPackPlugin = require('html-webpack-plugin');\n  module.exports = {\n  \t// ...\n  \tplugins:[\n  \t\tnew HtmlWebPackPlugin({\n  \t\t\ttemplate: 'public/index.html',\n  \t\t\tfilename: 'index.html',\n  \t\t\tinject: true\n  \t\t})\n  \t]\n  }\n  ```\n\n## 搭建本地服务\n\n### 安装依赖\n```bash\nnpm install webpack-dev-server --save-dev\n```\n\n### webpack.config.js 文件中配置\n```js\nmodule.exports = {\n\t// ...\n\tdevServer: {\n\t\tcontentBase: './dist',\n\t\thost: 'localhost',\n\t\tport: 8888\n\t}\n}\n```\n\n### package.json 文件中配置启动命令\n\n```js\n{\n    \"scripts\": {\n        \"start\": \"webpack-dev-server --mode development --open\"\n    }\n}\n```\n\n### 启动服务\n```\nnpm start\n```\n\n## 打包\n\n### package.json 文件中配置打包命令\n```js\n{\n    \"scripts\": {\n        \"build\": \"webpack --mode production\"\n    }\n}\n```\n\n### 启动打包功能\n```\nnpm build\n```\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxpoet%2Fwebpack-es6-dev-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxpoet%2Fwebpack-es6-dev-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxpoet%2Fwebpack-es6-dev-starter/lists"}