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=

原文地址:https://www.cnblogs.com/yiyi17/p/9167096.html

时间: 2024-10-04 01:40:27

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

webpack构建工具快速上手指南

最近在研究react项目,接触到webpack打包工具.刚接触的时候一脸茫然,经过最近的学习,下面我来带大家开启webpack入门之旅. webpack是什么 webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).样式(含less/sass).图片等都作为模块来使用和处理.当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成少量的 bundle - 通常只

webpack构建工具常见问题及解决方法

webpack构建工具常见问题及解决方法 在运用webpack开发项目的时候经常会遇到各种各样的问题,我对实际开发项目中实际遇到的一些问题 进行总结,希望能帮助到大家. ?? 1. 构建需要的包未添加依赖报错 Module not found:"xxx(例:react)" in "项目文件" ??这种情况是由于"xxx(例:react)"未添加依赖,解决办法如下: npm install xxx(react) --save 或 yarn add

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

一:PostCss是什么?  PostCss是一个样式处理工具,它通过自定义的插件和工具生态体系来重新定义css.它鼓励开发者使用规范的css原生语法编写代码,然后配置编译器转换需要兼容的浏览器版本,最后通过编译将源码转换为目标浏览器可用的css代码. 它和stylus的不同之处是它可以通过插件机制灵活地扩展其支持的特性,不像stylus的语法是固定的,它的用途非常多,比如css自动加前缀,使用下一代css语法等等. postcss官方有很多插件,查看插件(https://github.com/

webpack构建工具初始化并运行简单的demo

webpack官网:https://webpack.js.org/ webpack是构建工具 安装webpack的前提:node,npm要安装 初始化项目 首先是初始化项目,创建一个文件夹,并且进入文件夹使用npm init进行初始化 mkdir q_webpack //创建q_webpack文件夹 cd q_webpack //进入该文件夹 npm init -y //创建package.json,必须要有这个才能安装模块 npm install webpack --save-dev npm

深入浅出的webpack构建工具---babel之配置文件.babelrc(三)

阅读目录 一:理解 babel之配置文件.babelrc 基本配置项 二:在webpack中配置babel 回到顶部 一:理解 babel之配置文件.babelrc 基本配置项 1. 什么是babel? 它是干什么用的? ES6是2015年发布的下一代javascript语言标准,它引入了新的语法和API,使我们编写js代码更加得心应手,比如class,let,for...of promise等等这样的,但是可惜的是这些js新特性只被最新版本的浏览器支持,但是低版本浏览器并不支持,那么低版本浏览

深入浅出的webpack构建工具---DllPlugin DllReferencePlugin提高构建速度(七)

阅读目录 一:什么是DllPlugin 和 DllReferencePlugin?作用是什么? 二:在项目中如何使用 DllPlugin 和 DllReferencePlugin? 三:DllPlugin DllReferencePlugin使用在vue和vuex项目中 回到顶部 一:什么是DllPlugin 和 DllReferencePlugin?作用是什么? 在使用webpack进行打包时候,对于依赖的第三方库,比如vue,vuex等这些不会修改的依赖,我们可以让它和我们自己编写的代码分开

webpack前端构建工具学习总结(四)之自动化生成项目中的html页面

接续上文:webpack前端构建工具学习总结(三)之webpack.config.js配置文件 1.安装html-webpack-plugin插件,输入命令:npm install html-webpack-plugin --save-dev 2.在webpack.config.js文件中,引入html-webpack-plugin插件 3.输入命令:npm run webpack,编译打包 可以看到在dist/js目录下新生成了一个index.html文件,并且引入了新编译生成的两个js,但此

前端自动化构建工具Webpack开发模式入门指南

Webpack Webpack是时下最流行的模块打包器 它的主要任务就是将各种格式的JavaScript代码,甚至是静态文件 进行分析.压缩.合并.打包,最后生成浏览器支持的代码 特点: 代码拆分方案:webpack可以将应用代码拆分成多个块,每个块包含一个或多个模块,块可以按需异步加载,极大提升大规模单页应用的初始加载速度 智能的静态分析:webpack的智能解析器几乎可以处理任何第三方库 Loader加载器:webpack只能处理原生js模块,但是loader可以将各种资源转换为js模块 p

JavaScript自动化构建工具入门----grunt、gulp、webpack

蛮荒时代的程序员: 做项目的时候,会有大量的js 大量的css   需要合并压缩,大量时间需要用到合并压缩 在前端开发中会出现很多重复性无意义的劳动 自动化时代的程序员: 希望一切都可以自动完成 安装 常用插件.压缩插件.合并插件等.  用插件实现 功能无限扩展 简单介绍三种工具 grunt 是js任务管理工具(自动化构建工具)    -- Grunt官网 戳这里 优势:出来早 社区成熟  插件全 缺点:配置复杂   效率低 (cpu占用率高) -------------------------