>[success] # 准备篇章 -- 搭建简单的运行 ~~~ 1.如果你使用的是现成的'webpack' 配置请忽略下面为了，测试而搭建的步 骤。 2.如果你还不知道，如何搭建可以看我的另一个文档'前端知识扩展'中有对webpack 搭建的讲解 3.我将会带你搭建一个简单的环境，但这里只有步骤，没有详细的内容讲解，想看 更多详细内容可以转移'前端知识扩展'中有对webpack搭建的讲解 ~~~ ~~~ 1.初始化'npm' -- npm init -y 2.安装'webpack' -- npm i webpack --save-dev 3.安装'webpack-cli' -- npm i webpack-cli --save-dev 4.构建一个实时打包'webpack-dev-server' -- npm i webpack-dev-server --save-dev 5.安装'html-webpack-plugin' 内存中生成html 并且将js自动加入html中 -- npm i html-webpack-plugin --save-dev 6.把js 高级语法es6 转成低级语法: 6.1 npm install -D babel-loader@7 babel-core babel-preset-env 6.2 npm i babel-core babel-loader babel-plugin-transform-runtime -D 6.3 npm i babel-preset-env babel-preset-stage-0 -D 6.4 npm i babel-plugin-transform-decorators-legacy 7.配置吧高级语法转换低级语法的文件在根目录叫.babelrc: { "presets": ["env", "stage-0"], "plugins": ["transform-runtime","transform-decorators-legacy"] } 8.配置'webpack.config.js',文件： const path = require('path'); const webpack = require('webpack'); // 启用热更新的 第2步 const htmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry:path.join(__dirname,'/src/main.js') , // 入口，表示，要使用 webpack 打包哪个文件 output: { // 输出文件相关的配置 path: path.join(__dirname, '/dist'), // 指定 打包好的文件，输出到哪个目录中去 filename: 'bundle.js' // 这是指定 输出的文件的名称 }, devServer: { open: true, // 自动打开浏览器 port: 3000, // 设置启动时候的运行端口 contentBase: 'src', // 指定托管的根目录 hot: true // 启用热更新 的 第1步 }, plugins: [ new webpack.HotModuleReplacementPlugin(), // new 一个热更新的 模块对象， 这是 启用热更新的第 3 步 new htmlWebpackPlugin({ // 创建一个 在内存中 生成 HTML 页面的插件 template: path.join(__dirname, './src/index.html'), // 指定 模板页面，将来会根据指定的页面路径，去生成内存中的 页面 filename: 'index.html' // 指定生成在内存的页面的名称 }) ], module: { // 这个节点，用于配置 所有 第三方模块 加载器 rules: [ // 所有第三方模块的 匹配规则 { test:/\.js$/, use: 'babel-loader', exclude:/node_modules/ }, ] } } 9.配pack.json 快速启动： "scripts": { "dev": "webpack-dev-server" }, ~~~ >[info] ## 目录搭建 -- 说明 ~~~ . ├── dist // 打包后的文件 ├── src // 源码文件 | ├── model // 对项目个个模块的数据管理 │ │ ├── baseValidator // 存放常用的基本验证类文件 │ │ │ └── 'BaseValidator.js' // 所有自定验证规则的基类 │ │ ├── module // 存放业务对应接口的管理类文件 │ │ │ └── 'BaseModel.js' // 所有对应接数据的基类 │ │ └── untils // 存放整个数据管理所需要的工具文件 │ │ └── 'decorators.js' // 存放一些装饰共同的方法 | └── js | └── index.html | └── main.js // 这是 main.js 是我们项目的JS入口文件 └── package.json // npm init 生成的NPM包的所有相关信息，其中sprict可以脚本 ~~~