Angular-wepack-gulp-demo NPM

angular-wepack-gulp-demo

usage

1 http-server assets

2 gulp dev

3 open browser and enter http://localhost:4000

总结

在引入非common文件时,需要通过exports-loader插件引入(需要安装exports-loader插件)引入方式如下:

module: {
  loaders: [
    { test: require.resolve(srcDir + '/js/common/angular/angular.js'), loader: "exports?window.angular" },
    { test: require.resolve(srcDir + '/js/app/util.js'), loader: "exports?window.util" }
  ]
}

当需要全局使用变量时,可以通过配置plugins的ProvidePlugin,这样文件(变量)时可以不用require('angular'),可以直接使用angular:
```
plugins: [
    new webpack.ProvidePlugin({
      angular: 'angular',
      util: 'util'
      // cookie: 'cookie'
      // _: '-'
    })
]
```
css-loader依赖的postcss插件最低node.js版本要求是0.12.故引起webpack执行报错。也可以通过安装模块"es6-promise",然后在webpack.config.js配置中引入"require('es6-promise').polyfill()"解决
webpack 文件路径: 相对路径是相对当前目录。绝对路径是相对入口文件(假如入口文件是index.js,绝对路径/util.js就是和index.js在同一目录.)
webpack对插件的执行顺序是从后往前的，比如{ test: /\.css$/, loader: 'style-loader!css-loader'}，先执行css-loader,再执行style-loader

中文站点:

angular webpack gulp demo

0.0.0

1 year ago