Webpack搭建项目 Demo

构建、打包工具简介：

Gulp、Grunt、Browserify、Webpack、Rollup

Gulp、Grunt： 构建流程管理工具，通过定义和执行任务的方式构建工作。如预编译语言的处理、模块打包、代码压缩等

Browserify、Webpack、Rollup属于打包工具，把模块按照特定的规则合并到一起，使浏览器可执行　　

新建Webpack项目

npm 包管理器 - 可以让DEV获取代码和分发代码的工具，如一些具有特定功能的工具或框架等。Javascript主流的包管理器： NPM、Yarn

使用Npm之前应该 设置npm国内镜像 npm config set registry https://registry.npm.tabao.org

步骤简介：

1. npm Init ---- 初始化npm工程（类似于Maven、Gradle工程）。 产物 - package.json 这个文件主要是引入dependency、devdependency的功能
2. 安装npm包。这里--save是要将依赖添加到 package.json的dependecy节点中。
3. npm install typescript --save
4. 安装webpack, webpack-dev-server等开发工具框架到Package.json的 devDependency中

5. npm install webpack --save-dev

6. npm install webpack-dev-server --save-dev

7. webpackage的安装包被放在了 node_modules/.bin/webpack中。 可以使用Webpack提供的打包功能将ES6、Typescript的js文件打包到指定的文件中。
8. node_modules/.bin/webpack app.js dist/bundle.js 
9. 这时html中只要引用dist/bundle.js就可以了
10. 有一个问题是随着文件的增多，打包可能变得很复杂。参数也可能变得不好记。 此时引入了webpack.config.js
    

    // entry 是整个webpack的根节点，webpack从根节点js文件能够找到其他的依赖。并能自动解决依赖
    // output 是输出的打包文件
    // devServer 启动的本地调试server，指定端口号以及本地打包文件的存放地
    const path=require('path');
    const webpack = require('webpack');
    
    module.exports={
        entry: './src/main.ts',
        output:{
            path: path.join(__dirname,'dist'),
            filename: 'bundle.js'
        },
        resolve:{
            extensions:['*','.ts','.js']
        },
        module:{
            loaders:[
                {test:/\.ts$/,loader: 'ts-loader'}
            ]
        },
        devServer:{
            port: 3001
        }
    };

    
    
11. 启动devServer,即node_modules/.bin/webpack-dev-server'。 浏览器中查看第9步中的html文件查看变更生效
12. 进一步简化。devServer的启动、Webpack的打包工作。 即使用script的方式进行快捷操作. 在Package.json中新增 scripts 脚本。 将第8、12步webpack指令添加进去就可以了。 如下： 

13. {
      "name": "webpack",
      "version": "1.0.0",
      "description": "",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        
        "build": "node_modules/.bin/webpack",
        
        "server": "node_modules/.bin/webpack-dev-server --inline --colors --progress",
        "start": "cnpm run server"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "webpack": "^3.8.1",
        "webpack-dev-server": "^2.9.4"
      }
    }

     

配置eslint：

https://github.com/xcatliu/typescript-tutorial/blob/master/ecosystem/eslint.md