脚手架搭建流程小结

1.为什么会有这个文章

前端工具的演化，可以说应接不暇。我在具体业务实践中，尝试和接触过grunt，fis，glup等脚手架的流程。在应用这些工具的过程中，对开发流程模棱两可，虽说是简单的打包，转译，压缩，混淆等等，但具体实现起来，怎么优化等等甚至路径的配置等等，都需要实践才能领会。学习操作系统最好的方式就是做系统，那么学习脚手架的流程，最好的方式也应该如此。首先需要梳理一下前端开发常见的工作流：

一般的前端在开发过程中常用的资源只有HTML，CSS，JS和一些图片资源，可能会存在少量的音频甚至视频资源。对于这些，我们早已不是直接在编写HTML和CSS文件了。HTML可以用插件生成，CSS可能会遇到预编译工具，常见如LESS，SASS，JS使用方式更多样，有适用于大型系统的超集JS：TypeScript，也有可以转义ES6的Babel，如果使用了某种MVVM模式的框架，如react,vue，其中丰富的JSX语法和组建的概念，使得前端的开发流程大放异彩的同时，也提升了可维护性。在webpack作为前端脚手架的灵魂般存在的同时，我们在不同的阶段：开发，部署，上线都有着不同的需求，这其中必然要使用不一样的插件，脚本去实现目的。

2.如何实现

这是packjson.json的配置

{
  "name": "toddmark",
  "version": "1.0.0",
  "description": "build a custiom blod ",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "rm -rf build && webpack",
    "release": "git add . && git commit -m \"/****** release ******/\" && git push ",
    "dev": "cross-env NODE_ENV=development node dev-server.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/toddmark/toddmark.git"
  },
  "author": "Todd Mark",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/toddmark/toddmark/issues"
  },
  "homepage": "https://github.com/toddmark/toddmark#readme",
  "devDependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "cross-env": "^3.1.3",
    "css-loader": "^0.26.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "html-loader": "^0.4.4",
    "html-webpack-plugin": "^2.24.1",
    "imports-loader": "^0.7.0",
    "less": "^2.7.1",
    "less-loader": "^2.2.3",
    "react-hot-loader": "^1.3.1",
    "style-loader": "^0.13.1",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2"
  },
  "dependencies": {
    "bootstrap": "^3.3.7",
    "d3": "^4.4.1",
    "jquery": "^3.1.1",
    "react": "^15.4.1",
    "react-d3-library": "^1.1.7",
    "react-dom": "^15.4.1",
    "react-router": "^3.0.0"
  }
}

这是一段webpack.config.js的配置。

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
let isDev = false;
const env = process.env.NODE_ENV;
isDev = env === 'development' ? true : false;
console.log(isDev ? '开发环境' : '生产环境');
module.exports = {
  entry: {
    vendor: ['jquery', 'bootstrap'],
    index: ['./index.js']
  },
  devtool: 'source-map',
  output: {
    path: path.resolve('build'),
    publicPath: isDev ? '/' : `./`,
    filename: '[name]-[hash].js'
  },
  // externals: {
  //   react: 'React',
  //   'react-dom':'ReactDOM',
  // },
  module: {
    loaders: [{
        test: /\.html$/,
        loader: 'html'
      }, {
        test: /\.less$/,
        loader: "style-loader!css-loader!less-loader"
      }, {
        test: /\.css$/,
        loader: "style-loader!css-loader"
      }, {
        test: /\.(eot|woff|ttf|eot|woff2)$/, loader: "file-loader"
      }, {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loaders: ['react-hot', 'babel-loader?presets[]=es2015,presets[]=react']
      }, {
        test: /.*\.(gif|png|jpe?g|svg)$/i,
        loader: "file-loader?name=img-[sha512:hash:base64:7].[ext]"
      },{
        test: /bootstrap.+\.(jsx|js)$/, loader: 'imports?jQuery=jquery,$=jquery,this=>window'
      }
    ]
  },
  plugins:[
    new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js"),
    new HtmlWebpackPlugin({
      template: 'template/index.html'
    })
  ].concat(
    isDev ?
    new webpack.HotModuleReplacementPlugin() :
    [
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings: false
        }
      }),
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: JSON.stringify('production')
        }
      })
    ]
  )
}

package.json没啥好说的，纯粹的包管理目录文件，详细的文档可以在这里看到。我们在这里配置的一些简单的脚本，如下：

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "rm -rf build && webpack",
    "release": "git add . && git commit -m \"/****** release ******/\" && git push ",
    "dev": "cross-env NODE_ENV=development node dev-server.js"
  },

【build】顾名思义是用来编译用于发布的文件。【release】当然就是提交编译记录并且自动发布的意思。这其中有个【dev】是用来开发时使用，有一段不常见的标记cross-env，这个是为了兼容window下的NODE_ENV配置才引入的。我们可以看到，当使用开发脚本时，CLI会两件事：1，设置node环境。2，在node环境中使用dev-server.js脚本。如下：

const webpack = require('webpack');
const config = require('./webpack.config.js');
const port = 8000;
config.entry.index.unshift(`webpack-dev-server/client?http://localhost:${port}/`, 'webpack/hot/dev-server');
const WebpackDevServer = require('webpack-dev-server');
const compiler = webpack(config);
const server = new WebpackDevServer(compiler, {
  hot: true,
  stats: {
    colors: true,
    chunks: false
 }
})

server.listen(port);
console.log(`Listenting at http://localhost:${port}`);

可以看到，这段脚本里，我们使用了webpack.config.js的一些配置内容。然后开启了热价在模式，当执行完毕，我们的开发服务器也就启动成功了。可以看到这里我们使用了自动刷新的脚本（）The webpack-dev-server supports multiple modes to automatically refresh the page），并且开启了热替换模式。