angular1结合webpack构建工具

Posted 2020-11-17 yiyi17

目录结构　　　　

 

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=