首先安装 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. Props属性

    大多数组件在创建时就可以使用各种参数来进行定制.用于定制的这些参数就称为props(属性). import React, { Component } from 'react'; import { Ap ...

  2. 1.JavaScript面试

    1.1. 简要描述 JavaScript 的数据类型?   参考答案:   JavaScript 的数据类型可以分为原始类型和对象类型. 原始类型包括 string.number 和 boolean  ...

  3. erlang中的lists：foldl()的用法,格式转换实例应用

    lists:foldl(fun(),参数1,参数2):这个函数就是先把参数1传给fun()处理,然后将参数2(列表)中每一个元素,依次传给fun()函数进行处理. lists:foldl(fun(El ...

  4. pthread_mutex_lock

    pthread_mutex_lock pthread_mutex_lock(pthread_mutex_t *mutex); int pthread_mutex_trylock(pthread_mut ...

  5. WCF开发指南之构建服务

    一. 引言 Windows通讯基础(简称为WCF)是一种SDK,用于让你使用典型的CLR编程结构(例如用于发布和消费服务的类和接口等)来构建Windows面向服务的应用程序.WCF的编程模型是声明性的 ...

  6. Ubuntu远程连接windows

    一般情况下都是使用windows系统,通过mstsc远程连接linux系统,但对于一些linuxer来说,有时候需要远程连接一下windows,最后采用的是rdesktop,一个非常好用的工具 sud ...

  7. unity5.3.4之no android module loaded

    参考http://www.cnblogs.com/shenggege/p/5165616.html 最近从unity5.1.3升级到5.3.4的时候,发现有个问题: system.io.file' d ...

  8. MxNet下训练alexnet（一）

    1.图像经过工具包中的 make_lsit im2rec 转换为可调用各式.rec,.bin都可以 2.然后使用train_imageXXXX进行训练,参数需要对应 3.利用保存的模型进行估计,测试 ...

  9. Javascript DOM基础（一）概念

    Dom基础概念: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...

  10. 极简版 react+webpack 脚手架

    目录结构 asset/ css/ img/ src/ entry.js ------------------------ 入口文件 .babelrc index.html package.json w ...