首先安装 node.js这是毋庸置疑的，安装完了之后安装webpack

npm install webpack -g

接下来创建一个自己的文件夹 webpack-learn在里面创建一个index.html一个js文件夹

index.html：

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<title></title>

</head>

<body>

	<h1>webpck is nice tool</h1>

	<script type="text/javascript" src="bundle.js"></script>

</body>

</html>

js中创建

module-one.js

console.log("module-one")

module-two.js

console.log("module-two")

entry.js

require("./module-one.js");

require("./module-two.js");

接下来运行webpack：

webpack js/entry.js bundle.js

前面是需要打包的文件，后面是输出的文件，这样就可以看到bundle.js

这个时候打开index.html就可以看到console.log输出的内容了，这样操作就比较的麻烦，webpack可以配置文件，在工程目录下创建webpack的配置文件webpack.config.js

module.exports = {

	devtool:"sourcemap",

	entry:"./js/entry.js",

	output:{

		filename:"bundle.js",

	},

}

另外的一种配置：

// nodejs 中的path模块

var path = require('path');

module.exports = {

    // 入口文件，path.resolve()方法，可以结合我们给定的两个参数最后生成绝对路径，最终指向的就是我们的index.js文件

    entry: path.resolve(__dirname, '../app/index/index.js'),

    // 输出配置

    output: {

        // 输出路径是 myProject/output/static

        path: path.resolve(__dirname, '../output/static'),

        publicPath: 'static/',

        filename: '[name].[hash].js',

        chunkFilename: '[id].[chunkhash].js'

    },

}

在webpack的配置文件中配置source maps，需要配置devtool，它有以下四种不同的配置选项，各具优缺点，描述如下：

devtool选项 配置结果
source-map 在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map，但是它会减慢打包文件的构建速度；
cheap-module-source-map 在一个单独的文件中生成一个不带列映射的map，不带列映射提高项目构建速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试造成不便；
eval-source-map 使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。不过在开发阶段这是一个非常好的选项，但是在生产阶段一定不要用这个选项；
cheap-module-eval-source-map 这是在打包文件时最快的生成source map的方法，生成的Source Map 会和打包后的JavaScript文件同行显示，没有列映射，和eval-source-map选项具有相似的缺点；

正如上表所述，上述选项由上到下打包速度越来越快，不过同时也具有越来越多的负面作用，较快的构建速度的后果就是对打包后的文件的的执行有一定影响。

在学习阶段以及在小到中性的项目上，eval-source-map是一个很好的选项，不过记得只在开发阶段使用它

devtool生成一个map声明哪个文件指向哪个文件方便debug，删除bundle.js文件之后直接在终端输入webpack这个命令边代替了之前的 webpack js/entry.js bundle.js命令， 同样会生成bundle.js，bundle.js.map,在自己的工程中引入一些库，比如jquery

首先

npm init

这里生成一个package.json项目安装的库、插件什么的都在列表中。

安装jquery

npm install jquery --save-dev

安装完成后去修改一下module-one.js

var $ = require("jquery");

$("h1").html("is tomorrow");

这个时候在 执行webpack命令，这个时候页面显示为is tomorrow。下面使用webpack的loader。

npm install css-loader style-loader babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015  babel-preset-stage-0 babel-runtime --save-dev

安装完了要使用的话 ，还需要配置webpack.config.js

module.exports = {

    devtool:"sourcemap",

    entry:"./js/entry.js",

    output:{

        filename:"bundle.js",

    },

    module:{

        loaders:[

            {

                test:/\.css$/,

                loader:"style!css"

            },

        ]

    },

}

test使用正则匹配后缀名为.css的文件 loader说明我们需要使用哪个loader处理（这里我们需要css和style两个），这里我们去创建一个style.css文件

body{

    background: #999;

}

之后我们去配置我们的入口文件entry

require("./module-one.js");

require("./module-two.js");

require("../css/style.css");

执行webpack之后我们就可以看到我们的body变为了灰色，这就是我们需要的结果。将es6使用loader处理，首先在webpack.config.js中配置，配置babel和声明我们的loader

module.exports = {

    devtool:"sourcemap",

    entry:"./js/entry.js",

    output:{

        filename:"bundle.js",

    },

    module:{

        loaders:[

            {

                test:/\.css$/,

                loader:"style!css"

            },

            {

                test:/\.js$/,

                loader:"babel",

                exclude:/node_modules/,

            }

        ]

    },

    babel:{

        presets:['es2015','stage-0'],

        plugins:['transform-runtime']

    }

}

exclude就是将我们的node_modules这个目录全部忽略掉，可以加快的我们速度，那么在我们的module-one中使用es6语法

// var $ = require("jquery");

import $ from 'jquery';

$("h1").html("is yesterday");

这样在我们的页面中显示的就是is yesterday了。

webpack +vue开发（1）的更多相关文章

  1. Wabpack系列：在webpack+vue开发环境中使用echarts导致编译文件过大怎么办？

    现象,在一个webpack+vue的开发环境中,npm install echarts --save了echarts,然后在vue文件中直接使用 import echarts from 'echart ...

  2. webpack +vue开发（3）

    webpack的一些有用的命令 webpack --display-modules 在终端显示这些module,另外一个推荐使用 webpack --display-modules --display ...

  3. webpack +vue开发（2）

    我们的loader方式其实可以写成inline的方式 loaders:[ { test:/\.js$/, loader:"babel", exclude:/node_modules ...

  4. 做一个gulp+webpack+vue的单页应用开发架子

    1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...

  5. 基于 Laravel 开发 ThinkSNS+ 中前端的抉择（webpack/Vue）踩坑日记【ThinkSNS+研发日记系列】

    在上一篇文章< ThinkSNS+基于Laravel master分支,从1到 0,再到0.1>,简单的介绍了 社群系统ThinkSNS+ ,这里分享在开发过程中,前端选择的心理活动. L ...

  6. Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结

    本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用 ...

  7. VUE开发请求本地数据的配置，旧版本dev-server.js，新版本webpack.dev.conf.js

    VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te ...

  8. Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结和踩坑

    本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用 ...

  9. 基于 Webpack 4 搭建 Vue 开发环境

    自从工作之后,就已经很久没有写过博客了.时间被分割得比较碎,积累了一段时间的学习成果,才写下了这篇博客. 之前有写过 Webpack4 的文章,但是都比较偏入门,唯一的一篇实战篇 -- 基于Webpa ...

随机推荐

  1. PHP基础示例:用PHP+Mysql编写简易新闻管理系统[转]

    实现目标:使用php和mysql操作函数实现一个新闻信息的发布.浏览.修改和删除操作 实现步骤: 一.创建数据库和表 1.创建数据库和表:newsdb 2.创建表格:news 字段:新闻id,标题,关 ...

  2. 原生态AJAX详解和jquery对AJAX的封装

    AJAX: A :Asynchronous [eI`sinkrenes] 异步 J :JavaScript    JavaScript脚本语言 A: And X :XML 可扩展标记语言 AJAX现在 ...

  3. hibernate FetchType理解

    JPA定义实体之间的关系有如下几种: @OneToOne @ManyToOne @OneToMany @ManyToMany 在定义它们的时候可以通过fetch属性指定加载方式,有两个值: Fetch ...

  4. Maven+SSM搭建总结（非教程）

    记录我用Maven搭建Spring+SpringMVC+Mybatis项目的过程. 网上关于这个的详细教程有很多,但是优质而适合自己看的需要自己筛选以下我看过的几篇认为讲的比较详细的资源(照着做吧,做 ...

  5. 如何提高Service的优先级避免被杀死或者杀死后如何再次重启Service？

    2014-01-21 16:45:02 我们知道,当进程长期不活动时,如果系统资源吃紧,会杀死一些Service,或不可见的Activity等所在的进程. 如何避免Service被系统杀死,随便在网上 ...

  6. SpringMVC进阶

    1.springmvc(注解版本) 注解扫描 <?xml version="1.0" encoding="UTF-8"?> <beans xm ...

  7. The data is said to include information from networks

    The data is said to include information from networks as well as from individual computers and smart ...

  8. android studio 开启genymotion 出现"failed to create framebuffer image"

    出现错误 Unable to start the virtul device To start virtual devices, make sure that your video card supp ...

  9. ETL工具与脚本实现之间的对比

    scripts, custom code and individual vs. team development doesn’t scale And: ‣Lack of coding standard ...

  10. poj3268 最短路

    //Accepted 1124 KB 0 ms #include <cstdio> #include <cstring> #include <iostream> # ...