目录结构    

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. ssh 操作

    1.登录 ssh 用户名@远程地址 2.拷贝:scp -r 本地文件夹 远程文件夹(user@ip:目录) 3.从ssh中临时退出: a. ~  (control+z) b.查看后台任务:jobs c ...

  2. docker 安装 redis

    docker拉去镜像以及配置生成容器的步骤几乎和之前的nginx安装一样,直接写下面的命令了 1. docker pull redis 2. docker run -p 6379:6379 -v /U ...

  3. Jmeter函数作用域实时取值覆盖[针对HTTP Request等控制器]

    jmeter的属性和变量可以简单理解为编程里面的全局变量和局部变量.属性是全局可见,可以跨线程组传递调用,而变量基本上只能存在于一个线程组中(在测试计划定义的变量也是可以跨线程组传递的).同线程组内的 ...

  4. php 替换 oracle 数据字段中“看不见”换行符号

    工作需要,把oracle中的数据导出csv,导出代码如下:<?php$file_name = "申請書承認(予定休出).csv";header("Content-D ...

  5. <转> django模板语言filter方法

    Django的模板是一个简单的文本文件,它可以生成任何文本格式(HTML.XML.CSV等),在本文开始之前先看一个Django模板的例子: 从这个例子中可以看到,模板标签可以是单独出现的,如exte ...

  6. 【转】intellij idea使用指南—— 导入Eclipse的Web项目

    通常一个团队中可能有人用eclipse,有人用intelliJ,那么经常会出现需要导入别人用eclipse建好的web项目.而IntelliJ提供了多种项目类型的导入方式,其中就有eclipse. 在 ...

  7. CentOS 7 基础网络配置

    基础的网络配置,包括静态IP地址.子网掩码.网关.DNS,使用 nmtui 和 nmcli 工具时必须开启 NetworkManager 服务 文本用户界面工具 nmtui [root@localho ...

  8. JavaScript 调用 Windows 的打印 代码

    JavaScript 调用 Windows 的打印 代码 2009-02-24 10:36 <%@ Page Language="C#" AutoEventWireup=&q ...

  9. dotnet体系结构

    一.C#与.NET的关系 1.粗略地説,.net是一种在Windows平台上的编程架构————一种API. 2.C#编译器专门用于.net,这表示用C#编写的所有代码总是使用.NET Framewor ...

  10. python数组(列表、元组及字典)

    python数组的使用 2010-07-28 17:17 1.Python的数组分三种类型: (1) list 普通的链表,初始化后可以通过特定方法动态增加元素. 定义方式:arr = [元素] (2 ...