angular1结合webpack构建工具
目录结构
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构建工具的更多相关文章
- 深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三)
深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三) 从上面一系列的webpack配置的学习,我们现在来使用webpack来搭建vue的开发环境.首先我们来设想下我们的项目的 ...
- 深入浅出的webpack构建工具---AutoDllPlugin插件(八)
深入浅出的webpack构建工具---AutoDllPlugin插件(八) DllPlugin插件能够快速打包,能把第三方依赖的文件能提前进行预编译打包到一个文件里面去.提高了构建速度.因为很多第三方 ...
- 深入浅出的webpack构建工具---DevServer配置项(二)
深入浅出的webpack构建工具---DevServer配置项(二) 阅读目录 DevServer配置项 1. contentBase 2. port 3. host 4. headers 5. hi ...
- 深入浅出的webpack构建工具---webpack基本配置(一)
深入浅出的webpack构建工具---webpack基本配置(一) 阅读目录 一:webpack入门构建: 1. 安装webpack到全局 2. 安装webpack到本项目. 3. 如何使用webpa ...
- webpack构建工具快速上手指南
最近在研究react项目,接触到webpack打包工具.刚接触的时候一脸茫然,经过最近的学习,下面我来带大家开启webpack入门之旅. webpack是什么 webpack是近期最火的一款模块加载器 ...
- webpack搭建多页面系统(一):对webpack 构建工具的理解
为什么使用webpack构建工具? 1.开发效率方面: 在一般的开发过程中,分发好任务后,每个人完成自己单独的页面,如果有的人开发完成之后,接手别人的任务,就有可能造成开发时候的冲突. 如果利用模块化 ...
- 深入浅出的webpack构建工具---PostCss(五)
一:PostCss是什么? PostCss是一个样式处理工具,它通过自定义的插件和工具生态体系来重新定义css.它鼓励开发者使用规范的css原生语法编写代码,然后配置编译器转换需要兼容的浏览器版本, ...
- 深入浅出的webpack构建工具---HappyPack优化构建(九)
阅读目录 一:什么是HappyPack? 作用是什么? 二:如何在配置中使用HappyPack? 回到顶部 一:什么是HappyPack? 作用是什么? Webpack是允许在NodeJS中的,它是单 ...
- 深入浅出的webpack构建工具--webpack4+vue+router项目架构(十四)
阅读目录 一:vue-router是什么? 二:vue-router的实现原理 三:vue-router使用及代码配置 四:理解vue设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...
随机推荐
- Android蓝牙连接自动测试工具
蓝牙连接自动测试工具 1.需求产生 开发不按着需求走都是耍流氓且浪费时间.此工具的需求产生是研发人员在开发产品时涉及到蓝牙驱动和安卓蓝牙两个东西.但是呢,蓝牙不太稳定,那么工作来了.就需要研发人员一边 ...
- WCF 客户端连接慢
WCF客户端第一次连接超过1分钟,以后再连接就快了. 在 Config中加入 <basicHttpBinding> <binding name="BasicHttpBind ...
- SQL 单引号转义
declare @userNum varchar(50),@waterNum varchar(50),@tableName varchar(20),@sql varchar(max) select @ ...
- SQL 判断Null
字段 is null 这是多久没写SQL 了啊....................
- 搭建svn管理平台
安装svn服务器:yum -y install subversion 创建svn的目录:mkdir -p /data/svn 初始化svn目录:svnadmin create /data/svn co ...
- Qt 学习之路 2(53):自定义拖放数据
Qt 学习之路 2(53):自定义拖放数据 豆子 2013年5月26日 Qt 学习之路 2 13条评论上一章中,我们的例子使用系统提供的拖放对象QMimeData进行拖放数据的存储.比如使用QM ...
- Largest Submatrix of All 1’s(思维+单调栈)
Given a m-by-n (0,1)-matrix, of all its submatrices of all 1's which is the largest? By largest we m ...
- POJ - 1733 离散化 并查集
题意:求问数列区间奇偶信息正确与否 和上一题一样(甚至弱化),加个离散就ok啦 #include<iostream> #include<algorithm> #include& ...
- AppInventor2笔记
将视觉化的 块语言 翻译为 Android上的实现 的编译器使用了Kawa语言框架,而Kawa是Scheme编程语言的方言,由Per Bothner开发,并由自由软件基金会发布,它是GNU操作系统的一 ...
- APP在实际开发中应注意的关键点
在APP开发过程中,开发者比较注重的是功能模块的实现,从而忽略了APP的设计问题,特别是企业开发APP,但是,APP设计是APP开发中非常重要的一个环节,APP界面设计直接影响到APP用户的感官,因此 ...