angular1结合webpack构建工具

const { ???resolve ?} = require(‘path‘) ?const webpack = require(‘webpack‘) ?const HtmlWebpackPlugin = require(‘html-webpack-plugin‘) ?const url = require(‘url‘) ?const publicPath = ‘‘ ?var ExtractTextPlugin=require(‘extract-text-webpack-plugin‘);//build使用 ?module.exports = (options = {}) => ({ ???entry: //[‘babel-polyfill‘, ‘./app.js‘], ???{ ???????vendor: ‘./vendor‘, ???????index: [‘babel-polyfill‘,‘./app.js‘] ???}, ???output: { ???????path: __dirname + ‘/build‘, ???????filename: ‘[name].js‘ ?????}, ???// ?{ ???// ??path: resolve(__dirname, ‘dist‘), ???// ??filename: options.dev ? ‘[name].js‘ : ‘[name].js?[chunkhash]‘, ???// ??chunkFilename: ‘[id].js?[chunkhash]‘, ???// ??publicPath: options.dev ? ‘/assets/‘ : publicPath ???// }, ???module: { ?????rules: [ ???????// { ???????// ??test: /\.vue$/, ???????// ??loader: ‘vue-loader‘, ???????// ??options: { ???????// ????loaders: { ???????// ??????scss: ‘vue-style-loader!css-loader!sass-loader‘, ???????// ??????sass: ‘vue-style-loader!css-loader!sass-loader?indentedSyntax‘ ???????// ????} ???????// ??} ???????// }, ???????{ ?????????test: /\.js$/, ?????????use: [‘babel-loader‘], ?????????exclude: /node_modules/ ???????}, ???????{ ?????????test: /\.html$/, ?????????use: [{ ???????????loader: ‘html-loader‘, ???????????options: { ?????????????root: resolve(__dirname, ‘src‘), ?????????????attrs: [‘img:src‘, ‘link:href‘] ???????????} ?????????}] ???????}, ?????// ???{ ?????// ?????test:/\.css$/, ?????// ?????use:ExtractTextPlugin.extract({ ?????// ???????fallback:‘style-loader‘, ?????// ???????use:‘css-loader‘ ?????// ?????}) ?????// ???}, ?????// ???{ ?????// ?????test:/\.scss$/, ?????// ?????loader:ExtractTextPlugin.extract({ ?????// ???????fallback:‘style-loader‘, ?????// ???????use:‘css-loader!sass-loader‘ ?????// ?????}) ?????// ???}, ??????????{ ????????????test: /\.css$/, ????????????use: [‘style-loader‘, ‘css-loader‘, ‘postcss-loader‘] ??????????}, ??????????{ ????????????test: /\.scss$/, ????????????exclude:/node_modules/, ????????????use: [‘style-loader‘, ‘css-loader‘, ‘postcss-loader‘,‘sass-loader‘] ??????????}, ???????{ ?????????test: /favicon\.png$/, ?????????use: [{ ???????????loader: ‘file-loader‘, ???????????options: { ?????????????name: ‘[name].[ext]?[hash]‘ ???????????} ?????????}] ???????}, ???????{ ?????????test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/, ?????????exclude: /favicon\.png$/, ?????????use: [{ ???????????loader: ‘url-loader‘, ???????????options: { ?????????????limit: 100000, ?????????????name:‘img/[name].[ext]?[hash]‘ ???????????} ?????????}] ???????} ?????] ???}, ???plugins: [ ?????new webpack.optimize.CommonsChunkPlugin({ ???????names: [‘vendor‘, ‘manifest‘] ?????}), ?????new ExtractTextPlugin({ ???????filename:‘[name][hash].css‘, ???????disable:false, ???????allChunks:true ?????}), ?????new HtmlWebpackPlugin({ ???????template: ‘./index.html‘ ?????}) ???], ???externals:{//抽离第三方库 ?????/*"vue":"window.Vue", ?????????"vue-router":"window.VueRouter"*/ ???}, ???resolve: { ?????alias: { ???????‘~‘: resolve(__dirname, ‘src/components‘) ?????} ???}, ???devServer: { ?????host: ‘127.0.0.1‘, ?????port:8808, ?????proxy: { ???????‘/gonghui/‘: { ?????????target: ‘http://127.0.0.1‘, ??????????secure: false, ??????????changeOrigin: true, ??????????pathRewrite: { ????????????‘^/gonghui‘: ‘gonghui‘ ??????????} ???????} ?????}, ?????historyApiFallback: { ???????index: url.parse(options.dev ? ‘/assets/‘ : publicPath).pathname ?????} ???}, ???devtool: options.dev ? ‘#eval-source-map‘ : ‘#source-map‘ ?}); ?

{ ?"name": "angular1.0-simple", ?"version": "1.0.0", ?"description": "", ?"main": "index.js", ?"scripts": { ???"test": "echo \"Error: no test specified\" && exit 1", ???"dev": "webpack-dev-server -d --inline --hot --env.dev", ???"build": "rimraf dist && webpack -p ?--progress --hide-modules" ?}, ?"author": "", ?"license": "ISC", ?"devDependencies": { ???"angular": "^1.3.20" ?}, ?"devDependencies": { ???"autoprefixer": "^6.6.0", ???"babel-core": "^6.21.0", ???"babel-eslint": "^7.1.1", ???"babel-loader": "^6.4.0", ???"babel-polyfill": "^6.26.0", ???"babel-preset-es2015": "^6.13.2", ???"css-loader": "^0.27.0", ???"eslint": "^3.12.2", ???"eslint-config-enough": "^0.2.2", ???"eslint-loader": "^1.6.3", ???"extract-text-webpack-plugin": "^2.1.0", ???"file-loader": "^0.10.1", ???"html-loader": "^0.4.5", ???"html-webpack-plugin": "^2.24.1", ???"node-sass": "^4.5.2", ???"postcss-loader": "^1.3.3", ???"rimraf": "^2.5.4", ???"sass-loader": "^6.0.3", ???"style-loader": "^0.13.2", ???"url-loader": "^0.5.8", ???"webpack": "^2.2.0-rc.4", ???"webpack-dev-server": "2.1.0-beta.12" ?}}

module.exports = { ?plugins: [ ???require(‘autoprefixer‘)() ?]}

{ ?"presets": [ ???["es2015", { "modules": false }] ?]}

<!DOCTYPE html><html ng-app="app"><head lang="en"> ?<meta charset="UTF-8"> ?<title>webpackAngular</title></head><body> ?<h1>webpack + Angular </h1> ?<!-- <hello-hs></hello-hs>s --> ?<hello-world></hello-world></body></html>

//引入angularvar angular = require(‘angular‘);//定义一个angular模块var ngModule = angular.module(‘app‘,[]);//引入指令文件require(‘./helloWorld/helloWorld.js‘)(ngModule);//引入样式文件require(‘./css/style.css‘);

<div class="ing"></div><div class="hello-world"> ???<span ng-bind="vm.greeting"></span></div>

module.exports = function(ngModule) { ???//定义指令，对应页面中的<hello-world></hello-world> ???ngModule.directive(‘helloWorld‘, helloWorldFn); ???function helloWorldFn() { ?????return { ???????//元素(element) ???????restrict: ‘E‘, ???????scope: {}, ???????templateUrl: ‘./helloWorld/helloWorld.html‘, ???????controllerAs: ‘vm‘, ???????controller: function () { ?????????var vm = this; ?????????console.log(‘this‘,this); ?????????vm.greeting = ‘你好，我是Alan，很高兴见到你!‘; ???????} ?????} ???} ?}