目录结构    

webpack.config.js

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'
});

  package.json

{
"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"
}
}

  postcss.config

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

  .bablelrc

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

  index.html

<!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>

  app.js

  

//引入angular
var angular = require('angular');
//定义一个angular模块
var ngModule = angular.module('app',[]);
//引入指令文件
require('./helloWorld/helloWorld.js')(ngModule);
//引入样式文件
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) {
//定义指令,对应页面中的<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,很高兴见到你!';
}
}
}
}

  

    这个可以在开发环境使用,在打包的时候遇到问题,未完,如果有已经研究好的小伙伴欢迎留言

大型项目请参考https://github.com/search?utf8=%E2%9C%93&q=angular1&type=

angular1结合webpack构建工具的更多相关文章

  1. 深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三)

    深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三) 从上面一系列的webpack配置的学习,我们现在来使用webpack来搭建vue的开发环境.首先我们来设想下我们的项目的 ...

  2. 深入浅出的webpack构建工具---AutoDllPlugin插件(八)

    深入浅出的webpack构建工具---AutoDllPlugin插件(八) DllPlugin插件能够快速打包,能把第三方依赖的文件能提前进行预编译打包到一个文件里面去.提高了构建速度.因为很多第三方 ...

  3. 深入浅出的webpack构建工具---DevServer配置项(二)

    深入浅出的webpack构建工具---DevServer配置项(二) 阅读目录 DevServer配置项 1. contentBase 2. port 3. host 4. headers 5. hi ...

  4. 深入浅出的webpack构建工具---webpack基本配置(一)

    深入浅出的webpack构建工具---webpack基本配置(一) 阅读目录 一:webpack入门构建: 1. 安装webpack到全局 2. 安装webpack到本项目. 3. 如何使用webpa ...

  5. webpack构建工具快速上手指南

    最近在研究react项目,接触到webpack打包工具.刚接触的时候一脸茫然,经过最近的学习,下面我来带大家开启webpack入门之旅. webpack是什么 webpack是近期最火的一款模块加载器 ...

  6. webpack搭建多页面系统(一):对webpack 构建工具的理解

    为什么使用webpack构建工具? 1.开发效率方面: 在一般的开发过程中,分发好任务后,每个人完成自己单独的页面,如果有的人开发完成之后,接手别人的任务,就有可能造成开发时候的冲突. 如果利用模块化 ...

  7. 深入浅出的webpack构建工具---PostCss(五)

    一:PostCss是什么?  PostCss是一个样式处理工具,它通过自定义的插件和工具生态体系来重新定义css.它鼓励开发者使用规范的css原生语法编写代码,然后配置编译器转换需要兼容的浏览器版本, ...

  8. 深入浅出的webpack构建工具---HappyPack优化构建(九)

    阅读目录 一:什么是HappyPack? 作用是什么? 二:如何在配置中使用HappyPack? 回到顶部 一:什么是HappyPack? 作用是什么? Webpack是允许在NodeJS中的,它是单 ...

  9. 深入浅出的webpack构建工具--webpack4+vue+router项目架构(十四)

    阅读目录 一:vue-router是什么? 二:vue-router的实现原理 三:vue-router使用及代码配置 四:理解vue设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...

随机推荐

  1. 图像金字塔、高斯金字塔、差分金字塔(DOG金字塔)、尺度空间、DoG (Difference of Gaussian)角点检测

    [图像金字塔] 图像金字塔是一种以多分辨率来解释图像的结构,通过对原始图像进行多尺度像素采样的方式,生成N个不同分辨率的图像.把具有最高级别分辨率的图像放在底部,以金字塔形状排列,往上是一系列像素(尺 ...

  2. JS 创建元素的三种方法

    1.动态创建元素一 document.write() 例如向页面中输出一个 li 标签 <pre class="html" name="code"> ...

  3. VIA格式转COCO格式

    VIA是一款很好用的标注软件,基于网页,不过现在开源的大多数目标检测器都是基于COCO训练和测试的,我们如果想要训练自己的数据集,要么修改源代码,要么将自己的标注格式改成COCO格式,采用第一种方法很 ...

  4. promise的一个简单易懂实例

    Promise: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  5. 小Q系列故事——最佳裁判

    Time Limit:200MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Description 过去的2012年 ...

  6. P4331 [BOI2004]Sequence 数字序列 (左偏树)

    [题目链接] https://www.luogu.org/problemnew/show/P4331 题目描述 给定一个整数序列\(a_1, a_2, ··· , a_n,\)求出一个递增序列\(b_ ...

  7. POJ_3126 Prime Path 【BFS+素数打表】

    一.题目 http://poj.org/problem?id=3126 二.分析 该题主要是要让我们找到一个$4$位素数到另一个$4$位素数的最少的变换次数,且要求保证每一次变换都满足 1.下一个数必 ...

  8. 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义

    参考文章: 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义

  9. javascript 中typeOf

    JS中的变量是松散类型(即弱类型)的,可以用来保存任何类型的数据. typeof 可以用来检测给定变量的数据类型,可能的返回值: 1. 'undefined' --- 这个值未定义: 2. 'bool ...

  10. 实现Java程序跨平台运行十二个注意事项

    [转自] http://blog.chinaunix.net/uid-20550186-id-1927257.html 使用Java语言编写应用程序最大的优点在于"一次编译,处处运行&quo ...