webpack实例

Posted on   |  

之前就用过webpack，只是一直是知其然而不知其所以然，所以决定自己配置一遍，还是遇到了一些坑

webpack的优点

  • 对 CommonJS 、 AMD 、ES6的语法做了兼容
  • 对js、css、图片等资源文件都支持打包
  • 有独立的配置文件webpack.config.js
  • 可以将代码切割成不同的chunk，实现按需加载，降低了初始化时间
  • 支持 SourceUrls 和 SourceMaps，易于调试
  • 具有强大的Plugin接口，大多是内部插件，使用起来比较灵活
  • webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快

利用npm script启动webpack

webpack并没有提供自动刷新的功能，导致每次修改代码都必须要再执行一次webpack，因此需要使用webpack-dev-server

webpack-dev-server 提供了两种模式用于自动刷新页面：

以上说的两个页面自动刷新的模式都是指刷新整个页面，相当于点击了浏览器的刷新按钮。

webpack-dev-server 还提供了一种 –hot 模式

"scripts": {
  "build": "webpack -d",
  "dev": "webpack-dev-server -d --inline --devtool eval --progress --colors --content-base dist"
},
  • webpack-dev-server: 在 localhost:8080 建立一个 Web 服务器
  • -d: 提供source map，方便调试。
  • –inline: 自动刷新
  • –devtool eval: 为你的代码创建源地址。当有任何报错的时候可以让你更加精确地定位到文件和行号
  • –progress: 显示合并代码进度
  • –colors: 在命令行中显示颜色
  • –content-base dist:指向设置的输出目录

example

// 为了保证windows下面路径正确，最好使用path路径
var path = require('path');

module.exports = {
    // 入口文件，一般利用入口文件来引入其他模块
  entry: [
    path.resolve(__dirname, 'src/entry.js')
  ],
  // 打包后的文件
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  // 官方解释：https://webpack.github.io/docs/library-and-externals.html
  // 我认为是整个运行过程中都需要依赖的库，react应用程序运行过程中一直需要react库
  externals: {
    'react': 'React'
  },
  // 模块加载关系
  module: {
    loaders: [{
         // 对于.js结尾的文件以es6方式加载
      test: /\.js$/,
      // loader: jsx!babel = loaders: ['style', 'css']
      loader: 'jsx!babel',
      // 包含的文件，千万注意不要使用''
      include: /src/
    }, {
      test: /\.css$/,
      loader: 'style!css'
    }]
  },
  // source-map 在新版chrome下要用cmd+p调出来
  devtool: "#inline-source-map"
}

坑

include: /src/

如果写成

include: '/src/'

没有import和export的模式下编译并不会报错，但是在如下情况就会报错

import List from './List'

错误如下：

ERROR in ./src/component/App.js
Module parse failed: /Users/zhan/Documents/React/webpack/160315_webpack_study/src/component/App.js Line 2: Unexpected token
You may need an appropriate loader to handle this file type.
| 'use strict';
| import React from "react";
|
| class App {
 @ ./src/entry.js 2:0-26

Tip

source-map还需要深入研究一下