webpack.md

webpack

loaders

Javascript loader

# babel,babel-loader依赖
$ npm install --save-dev babel-core babel-loader

# ES2015转码规则
$ npm install --save-dev babel-preset-es2015

# react转码规则
$ npm install --save-dev babel-preset-react

# ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

配置babel的规则

{
  "presets": [
    "es2015",
    "stage-0"
  ],
  "plugins": []
}

配置webpack的loader

{
  "test": /\.js$/,
  "loader": "babel",
  "exclude": /node_modules/
}

babel参考： babel
webpack.loader参考：webpack.loader

Css loader

# 把css转成DOM（style）插入到页面中
$ npm install --save-dev style-loader

# 加载css文件，例如 @import，url()等等加载进来的文件
$ npm install --save-dev css-loader

# 将css放进style标签，并插入到页面中
$ npm install --save-dev style-loader

# 后处理器平台，例如插件后处理浏览器兼容前缀等
$ npm install --save-dev postcss-loader autoprefixer

# 预处理器，less处理器(个人喜欢less)
$ npm install --save-dev less-loader

# 预处理器，sass处理器
$ npm install --save-dev sass-loader

配置webpack的loader，loader是从右到左执行的(从后往前)

{
  "test": /\.less/,
  "user": [
    "style-loader",
    "css-loader?-autoprefixer",
    {
      "loader": "postcss-loader",
      "options": {
        "plugins": [
          autoprefixer({
            browsers: ["iOS > 8", "Android >= 4.1"]
          })
        ]
      }
    }
  ]
}

Image loader

# 抓取打包css的图片，支持定义文件名的功能等
$ npm install --save-dev file-loader

# 封装file-loader, 新增支持小图转base64等功能
$ npm install --save-dev url-loader

配置webpack的loader

{
  "test": /\.(png|jpg|gif)$/,
  "loader": "url?limit=8192&name=./img/[hash].[ext]"
}

url-laoder参考：url-loader

Vue loader

# 支持加载vue文件
$ npm install --save-dev vue-loader

配置webpack的loader

{
  "test": /\.vue$/,
  "loader": "vue"
}