webpack 2 系列

webpack 2 系列

webpack 是一个强大的工具，学会通过工具来解决开发效率问题，是每一个 工程师都必备的技能之一。

那么我们来从零开始搭建一个 基于webpack 2 到 开发架子，来提升自己到开发速度、体验、代码编译、打包、压缩等等功能。

首先介绍一下国内 到 webpack 社区网站，webpack国内社区

第一步、 我们要做什么？

在开始搭建之前，我们得清晰到考虑到，我们搭建这个开发架子是用来做什么的，常见的，我们需要 起一个开发环境的服务以便于我们访问到我们开发到页面，然后我们需要打包压缩我们的静态文件，并且将压缩过的文件放到对应的位置。甚至可能会用到代理等等功能。

第二个、怎么做?

首先我们 npm init  一个 package.json 的文件，然后引入 webpack。往往这个时候很多同学可能就不知道怎么办了，这个时候需要去上面提到的网站中寻找对应的钩子或者叫api。这里我简单介绍下，在webpack 2 中，常常会用到的api 包括  entry 、 output 、pluhins、devServer 等等。如下面代码所示

module.exports = {
    entry: './src/app.js',
    output: {
        filename: 'bunlde.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: {}
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'bunlde',
            fliename: 'build-[hash].min.js'
        })
    ],
    devServer: {
        contnteBase: './src/',
        compress: true,
        hot: true,
        host: '127.0.0.1',
        port: '9000'
    }
}

以上代码基本上最基本的webpack的配置文件的写法, 当然需要创建对应的文件夹目录结构

第三步、 启动服务

这里我们一般会怎么做呢？ 当然，webpack 给我们提出这样的钩子api。
我们需要做的就是详细的看官方文档中的介绍。在官方文档中，提出来我们需要一个第三方的中间件叫做webpack-dev-server，我们去下载下来。然后我们尝试着去使用他。
如何使用 这个 webpack-dev-server 插件呢？

Config options:
  --config  Path to the config file
                  [字符串] [默认值: webpack.config.js or webpackfile.js]
  --env     Environment passed to the config, when it is a function

Basic options:
  --context    The root directory for resolving entry point and stats
                                [字符串] [默认值: The current directory]
  --entry      The entry point                                  [字符串]
  --watch, -w  Watch the filesystem for changes                   [布尔]
  --debug      Switch loaders to debug mode                       [布尔]
  --devtool    Enable devtool for better debugging experience (Example:
               --devtool eval-cheap-module-source-map)          [字符串]
  -d           shortcut for --debug --devtool
               eval-cheap-module-source-map --output-pathinfo     [布尔]
  -p           shortcut for --optimize-minimize --define
               process.env.NODE_ENV="production"                  [布尔]
  --progress   Print compilation progress in percentage           [布尔]

Module options:
  --module-bind       Bind an extension to a loader             [字符串]
  --module-bind-post                                            [字符串]
  --module-bind-pre                                             [字符串]

Output options:
  --output-path                 The output path for compilation assets
                                [字符串] [默认值: The current directory]
  --output-filename             The output filename of the bundle
                                            [字符串] [默认值: [name].js]
  --output-chunk-filename       The output filename for additional
                                chunks
          [字符串] [默认值: filename with [id] instead of [name] or [id]
                                                               prefixed]
  --output-source-map-filename  The output filename for the SourceMap
                                                                [字符串]
  --output-public-path          The public path for the assets  [字符串]
  --output-jsonp-function       The name of the jsonp function used for
                                chunk loading                   [字符串]
  --output-pathinfo             Include a comment with the request for
                                every dependency (require, import, etc.)
                                                                  [布尔]
  --output-library              Expose the exports of the entry point as
                                library                         [字符串]
  --output-library-target       The type for exposing the exports of the
                                entry point as library          [字符串]

Advanced options:
  --records-input-path       Path to the records file (reading) [字符串]
  --records-output-path      Path to the records file (writing) [字符串]
  --records-path             Path to the records file           [字符串]
  --define                   Define any free var in the bundle  [字符串]
  --target                   The targeted execution environment [字符串]
  --cache                    Enable in memory caching
                  [布尔] [默认值: It's enabled by default when watching]
  --watch-stdin, --stdin     close when stdin ends                [布尔]
  --watch-aggregate-timeout  Timeout for gathering changes while
                             watching
  --watch-poll               The polling interval for watching (also
                             enable polling)                      [布尔]
  --hot                      Enables Hot Module Replacement       [布尔]
  --prefetch                 Prefetch this request (Example: --prefetch
                             ./file.js)                         [字符串]
  --provide                  Provide these modules as free vars in all
                             modules (Example: --provide jQuery=jquery)
                                                                [字符串]
  --labeled-modules          Enables labeled modules              [布尔]
  --plugin                   Load this plugin                   [字符串]
  --bail                     Abort the compilation on first error [布尔]
  --profile                  Profile the compilation and include
                             information in stats                 [布尔]
  --hot-only                 Do not refresh page if HMR fails     [布尔]

Resolving options:
  --resolve-alias         Setup a module alias for resolving (Example:
                          jquery-plugin=jquery.plugin)          [字符串]
  --resolve-extensions    Setup extensions that should be used to
                          resolve modules (Example: --resolve-extensions
                          .es6 .js)                               [数组]
  --resolve-loader-alias  Setup a loader alias for resolving    [字符串]

Optimizing options:
  --optimize-max-chunks      Try to keep the chunk count below a limit
  --optimize-min-chunk-size  Try to keep the chunk size above a limit
  --optimize-minimize        Minimize javascript and switches loaders to
                             minimizing                           [布尔]

Stats options:
  --color, --colors   Enables/Disables colors on the console
                                       [布尔] [默认值: (supports-color)]
  --info              Info                         [布尔] [默认值: true]
  --quiet             Quiet                                       [布尔]
  --client-log-level  Log level in the browser (info, warning, error or
                      none)                    [字符串] [默认值: "info"]

SSL options:
  --https           HTTPS                                         [布尔]
  --key             Path to a SSL key.                          [字符串]
  --cert            Path to a SSL certificate.                  [字符串]
  --cacert          Path to a SSL CA certificate.               [字符串]
  --pfx             Path to a SSL pfx file.                     [字符串]
  --pfx-passphrase  Passphrase for pfx file.                    [字符串]

Response options:
  --content-base          A directory or URL to serve HTML content from.
                                                                [字符串]
  --watch-content-base    Enable live-reloading of the content-base.
                                                                  [布尔]
  --history-api-fallback  Fallback to /index.html for Single Page
                          Applications.                           [布尔]
  --compress              Enable gzip compression                 [布尔]

Connection options:
  --port    The port
  --socket  Socket to listen
  --public  The public hostname/ip address of the server        [字符串]
  --host    The hostname/ip address the server will bind to
                                          [字符串] [默认值: "localhost"]

选项：
  --help, -h     显示帮助信息                                     [布尔]
  --version, -v  显示版本号                                       [布尔]
  --lazy         Lazy                                             [布尔]
  --inline       Inline mode (set to false to disable including client
                 scripts like livereload)          [布尔] [默认值: true]
  --open         Open default browser                             [布尔]

好了，这些都是 webpack-dev-server 的 配置参数， 各种对应的 属性和 作用都是可以 通过实验来看到效果。

最后 我们在 package.json 的 scripts 对象中 设置好对应的 启动标签。

最后一步 在 cmd 中 npm start 。 跑起来了！！！

虽然在这次 的 构建 中并没有过多的介绍 各种loader ，因为时间有限，所以大家在实际的 开发过程中遇到什么问题，或者 需要什么样的 loader 的时候可以去 官方文档上去查看，当然也可以在文章下面留言，我们一起来探讨 webpack 的 奥秘。