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=
你要觉得这篇文章比较好,记得点推荐!