首先安装 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. Flume使用小结

    本文介绍初次使用Flume传输数据到MongoDB的过程,内容涉及环境部署和注意事项. 1 环境搭建 需要jdk.flume-ng.mongodb java driver.flume-ng-mongo ...

  2. C#多线程 线程池

    实例1:直接看看微软提供的代码 using System; using System.Threading; public class Example { public static void Main ...

  3. android 总结（样式）—跑马灯 button的点击效果 RadioGroup 实现滑动的效果 button 下面有阴影 卡片样式

    <Button android:layout_width="wrap_content" android:layout_height="wrap_content&qu ...

  4. Centos上的安装openoffice+unoconv+swftools (转)

    ############################## #    swftools的安装     # ############################## 1.安装所需的库和组件 yum ...

  5. ASP.NET编程模型之ASP.NET页面生命周期图解

    ASP.NET编程模型中ASP.NET页面生命周期是指什么呢?它包括什么呢?ASP.NET编程模型之ASP.NET页面生命周期具体的过程有哪些呢?下面就开始我们的讲解吧: ASP.NET 页运行时,此 ...

  6. VS 2010 编译 Openssl

    VS 2010 编译 Openssl 1. 编译环境: Visual Studio 2010 Windows 7 64 旗舰版 openssl-1.0.1s 2. 下载安装ActivePerl,下载下 ...

  7. Maven管理 划分模块

    转载地址:juvenshun.iteye.com/blog/305865 “分天下为三十六郡,郡置守,尉,监” —— <史记·秦始皇本纪> 所有用Maven管理的真实的项目都应该是分模块的 ...

  8. CentOS 6.6 中中文输入法设置

    排版比较乱你,参见 https://www.zybuluo.com/Jpz/note/144597 Linux开发环境配置 安装完系统之后,我们需要设置中文输入法,中文输入法是系统自带的,设置步骤如下 ...

  9. centos7 查询jdk安装路径

  10. c++作用域运算符---7

    原创博客:转载请标明出处:http://www.cnblogs.com/zxouxuewei/ ::是C++里的“作用域运算符”. 比如声明了一个类A,类A里声明了一个成员函数void f(),但没有 ...