webpack前端构建angular1.0！！！

Leck1e 发布于2019-08-21 11:40 / 667人阅读

摘要：前端构建最近很热，用构建，，的文章很多，但是构建的文章找来找去也没有一篇让我感觉到很满意的，好多都运行报错，所以我参考了几篇文章，写一篇前端构建的文章指南。安装先装好和，因为是一个基于的项目。大神勿喷，感谢手下留情

webpack前端构建angular1.0

Webpack最近很热，用webapcak构建react，vue，angular2.0的文章很多，但是webpack构建angualr1.0的文章找来找去也没有一篇让我感觉到很满意的，好多都运行报错，所以我参考了几篇文章，写一篇webpack前端构建angular1.0的文章指南。本文适合第一次接触webpack的朋友，如果是老鸟，就不用看了。

安装

先装好node和npm，因为webpack是一个基于node的项目。然后查看node是否安装成功：

node -v && npm -v

全局安装webpack
npm install -g webpack
查看webpack是否安装成功：
npm -v

webpack中文社区：
https://doc.webpack-china.org/

建立项目

建一个文件夹，然后新建一个package.json的文件在项目根目录下

mkdir webpackAngular
cd webpackAngular
npm init

项目结构

现在项目里面就有一个package.json，我们多加一点东西，慢慢丰富它的内容。

添加index.html文件




  
  webpackAngular


  webpack + Angular

添加webpack.config.js文件，添加了最重要的webpack的配置文件，我们还是从非常简单的hello world开始玩起，webpack原生直接支持AMD和CommonJS两种格式，如果你想使用ES6的风格，这点以后再提。

webpack.config.js

var webpack = require("webpack");
var path = require("path");
var OpenBrowserPlugin = require("open-browser-webpack-plugin");
module.exports = {
  //上下文
  context: __dirname + "/app",
  //入口文件
  entry: "./app.js",
  //输出文件
  output: {
    path: __dirname + "/build",
    filename: "[name].js"
  },
 
  module: {
    loaders: [
      {
        test: /.css$/,
        loader: ["style-loader", "css-loader"]
      }
    ]
  },

  //自动启动浏览器
  plugins: [
    new OpenBrowserPlugin({ url: "http://localhost:8080" })
  ]
};

添加app.js

//引入angular
var angular = require("angular");
//定义一个angular模块
var ngModule = angular.module("app",[]);
//引入指令文件
require("./helloWorld/helloWorld.js")(ngModule);
//引入样式文件
require("./css/style.css");

添加style.css

.ing{
    height: 48px;
    position: relative;
    top:30%;
    left: 40%;
    background-image:url("/app/images/loader.gif");
    background-repeat: no-repeat;
    font-size: 24px;
    color: #000;
}

.hello-world {
   color: red;
   border: 1px solid green;
}

添加helloWorld.html

添加helloWorld.js

module.exports = function(ngModule) {
  //定义指令，对应页面中的
  ngModule.directive("helloWorld", helloWorldFn);
  function helloWorldFn() {
    return {
      //元素(element)
      restrict: "E",
      scope: {},
      templateUrl: "/app/helloWorld/helloWorld.html",
      controllerAs: "vm",
      controller: function () {
        var vm = this;
        console.log("this",this);
        vm.greeting = "你好，我是Alan，很高兴见到你!";
      }
    }
  }
}

安装依赖文件

sudo npm isntall angular --save-dev
sudo npm isntall css-loader --save-dev
sudo npm isntall style-loade --save-dev
sudo npm isntall express --save-dev
sudo npm isntall open-browser-webpack-plugin --save-dev
sudo npm isntall webpack --save-dev
sudo npm isntall webpack-dev-server --save-dev

自动保存package.json文件，如果直接复制package.json文件执行下面命令：
sudo npm install

webpack编译文件

sudo npm run build

会自动生成buid文件夹压缩js文件

webpack自动启动浏览器访问idnex.html

sudo npm run dev

也可以在浏览器直接访问：
http://localhost:8080/

见证奇迹的时候到了，然后神奇的发现：

最后恭喜你用webpack构建angular1.0成功了！！！
如果有什么疑问欢迎留言。。。
大神勿喷，感谢手下留情~~~

云服务器 GPU云服务器前端构建 webpack _webpack webpack cdn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86978.html

前端技术学习线路

摘要：前端工具构建工具编译工具包管理工具前端类库和框架类库框架框架框架设计风格扁平化语言相关预处理器模块化规范测试响应式方案百分比和编辑器和移动开发微信开发相关框架优秀第三方包数据库 1. 前端 1.1 工具 1.1.1 构建工具 webpack 1.1.2 编译工具 babel browserify ... 1.1.3 包管理工具 npm 1.2 前端类库和框架 1.2.1 类库 j...

blair 2019-08-22 10:39 评论0 收藏0
精读《js 模块化发展》

摘要：我是这一期的主持人黄子毅本期精读的文章是。模块化需要保证全局变量尽量干净，目前为止的模块化方案都没有很好的做到这一点。精读本次提出独到观点的同学有流形，黄子毅，苏里约，，杨森，淡苍，留影，精读由此归纳。这次是前端精读期刊与大家第一次正式碰面，我们每周会精读并分析若干篇精品好文，试图讨论出结论性观点。没错，我们试图通过观点的碰撞，争做无主观精品好文的意见领袖。我是这一期的主持人 ——...

Freelander 2019-08-22 17:00 评论0 收藏0
【前端构建】WebPack实例与前端性能优化

摘要：感受构建工具给前端优化工作带来的便利。多多益处逻辑清晰，程序注重数据与表现分离，可读性强，利于规避和排查问题构建工具层出不穷。其实工具都能满足需求，关键是看怎么用，工具的使用背后是对前端性能优化的理解程度。这篇主要介绍一下我在玩Webpack过程中的心得。通过实例介绍WebPack的安装，插件使用及加载策略。感受构建工具给前端优化工作带来的便利。 showImg(https://se...

QiShare 2019-08-19 17:48 评论0 收藏0
精读《如何编译前端项目与组件》

摘要：历史上由于是作为的替代品出现，当时要解决的问题是处理浏览器兼容问题，打包或，做一些公共资源替换，雪碧图等，最后可以顺带合并到一个文件，但模块化功能远远比弱，基本上只能合并，但不能理解模块概念。 1 引言说到前端编译方案，也就是如何打包项目，如何编译组件，可选方案有很多，比如：通过 webpack / parcel / gulp 构建项目。通过 parcel / gulp / b...

jiekechoo 2019-08-23 14:52 评论0 收藏0