'初次认识webpack'

发表于

require.js AMD

sea.js CMD

es6 module

node.js common.js

1
npm install webpack webpack-dev-server babel-loader babel-core  babel-preset-es2015 babel-preset-stage-0 css-loader style-loader file-loader url-loader html-webpack-plugin  --save-dev

webpack

  • universal module definition(umd)
  • grunt -> gulp -> webpack ->rollup
  • 不管什么样的文件都当做模块引用‘

  • 安装webpack

    1. npm install webpack -s

    2. 修改脚本 -> package.json

      1
      2
      3
      "scripts": {
          "build":"webpack"
          },

    3. 运行脚本

      1
      npm run build

  • webpack 会将所有相关模块都编译到build中指定文件中

  • loader

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    {
                   test:/\.js$/,
                   //babel-loader 把es6编译成es5
                   loader:'babel-loader'
               },
               {   //加载模块(require,import)的时候,会用正则匹配文件后缀,如果匹配上,则执行对应的加载器
                   test:/\.css$/,
                   loader:'style-loader!css-loader' //多个加载器之间可以用感叹号分割开
               },
               {
                   test: /\.(jpg|png|gif|svg)$/,
                   loader: "url-loader?limit=8k"
               }

    • .babelrc

      1
      2
      3
      4
      {
        "presets": ["es2015", "stage-0"],
        "plugins": []
      }

    • install webpack-dev-server -S

    • 安装最后一个插件
      1
      npm install html-webpack-plugin -S