ANGULAR1 combined with Webpack build tool

Directory structure

Webpack.config.js

const {Resolve} = require (' path ') const WEBPACK = require (' webpack ') const Htmlwebpackplugin = require (' HTML-WEBPA Ck-plugin ') const URL = require (' URL ') const Publicpath = ' var extracttextplugin=require (' Extract-text-webpack-plugin //build Use 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: ' V Ue-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: [' I Mg:src ', ' Link:href '}}]},///{//test:/\.css$/,//Use:extract       Textplugin.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:FA LSE, ALLCHUNKS:TRUE}), new Htmlwebpackplugin ({Template: './index.html '})], external s:{//from third-party libraries/* "Vue": "Window. Vue "," Vue-router ":" Window.    Vuerouter "* *}, Resolve: {alias: {' ~ ': Resolve (__dirname, ' src/components ')}}, Devserver: {host: ' 1 27.0.0.1 ', port:8808, proxy: {'/gonghui/': {target: ' http://127.0.0.1 ', secure:fals      E, Changeorigin:true, pathrewrite: {' ^/gonghui ': ' Gonghui '}}, Historyapifallback: {index:url.parse (Options.dev?) '/assets/': Publicpath). Pathname}}, Devtool:options.dev?   ' #eval-source-map ': ' #source-map '});

Package.json

{"Name": "Angular1.0-simple", "Version": "1.0.0", "description": "", "Main": "Index.js", "scripts": {"Test": "EC HO \ "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-es Lint ":" ^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 "," Extrac T-text-webpack-plugin ":" ^2.1.0 "," File-loader ":" ^0.10.1 "," Html-loader ":" ^0.4.5 "," Html-webpack-plugin ":" ^2.2 4.1 "," Node-sass ":" ^4.5.2 "," Postcss-loader ":" ^1.3.3 "," Rimraf ":" ^2.5.4 "," Sass-loader ":" ^6.0.3 "," Styl   E-loader ":" ^0.13.2 ", "Url-loader": "^0.5.8", "Webpack": "^2.2.0-rc.4", "Webpack-dev-server": "2.1.0-beta.12"}} 

Postcss.config

Module.exports = {  plugins: [    require (' Autoprefixer ') ()  ]}

. BABLELRC

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

Index.html

<! DOCTYPE html>
App.js
　　
Introduce angularvar angular = require (' angular ');//define a angular module var ngmodule = angular.module (' app ', []);//import directive file require (' ./helloworld/helloworld.js ') (ngmodule);//Introduce the style file require ('./css/style.css ');
Helloworld/helloworld.html
　　
<div class= "ing" ></div><div class= "Hello-world" >    <span ng-bind= "vm.greeting" ></ Span></div>
Helloworld/helloworld.js
Module.exports = function (ngmodule) {    //define directive, corresponding 
　　
This can be used in the development environment, in the packaging of the problem encountered, not finished, if there are already researched small partners welcome message
For large projects please refer to https://github.com/search?utf8=%E2%9C%93&q=angular1&type=
ANGULAR1 combined with Webpack build tool