一、原理

webpack 背后的原理其实就是把所有的非 js 资源都转换成 js (如把一个 css 文件转换成“创建一个 style 标签并把它插入 document ”的脚本、把图片转换成一个图片地址的 js 变量或 base64 编码等),然后用 CommonJS 的机制管理起来。

用途是通过 CommonJS 的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。

同时 webpack 提供了强大的 loader 机制和 plugin 机制,loader 机制支持载入各种各样的静态资源,不只是 js 脚本、连 html, css, images 等各种资源都有相应的 loader 来做依赖管理和打包;而 plugin 则可以对整个 webpack 的流程进行一定的控制

二、常用命令及安装

npm install -g webpack
npm install -g webpack-dev-server
npm install
npm info webpack //查看webpack 版本信息 webpack --display-modules --display-chunks --config webpack.config.js //重新生成打包js
webpack --watch //监听变动并自动打包
webpack --display-error-details //显示异常信息
webpack -p //压缩混淆脚本,这个非常非常重要!
webpack -d //生成map映射文件,告知哪些模块被最终打包到哪里了

首先要安装 Node.js, Node.js 自带了软件包管理器 npm
用npm 安装webpack

通常我们会将webpack安装到项目依赖,这样就可以使用本地版本的webpack

如果要使用webpack开发工具,要单独安装 webpack-dev-server

三、打包

1.生成之后的package.json

{
"name": "webapp",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"dependencies": {
"babel-core": "^6.11.4",
"babel-loader": "^6.2.4",
"babel-plugin-transform-runtime": "^6.9.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-stage-0": "^6.5.0",
"babel-runtime": "^6.9.2",
"css-loader": "^0.23.1",
"file-loader": "^0.9.0",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"vue": "^1.0.26",
"vue-hot-reload-api": "^1.3.2",
"vue-html-loader": "^1.2.2",
"vue-loader": "^8.5.2",
"vue-router": "^0.7.13",
"vue-style-loader": "^1.0.0",
"webpack": "^1.13.1",
"webpack-merge": "^0.13.0"
},
"devDependencies": {
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1",
"webpack-merge": "^0.13.0",
"weixin-js-sdk": "^1.0.7"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}

2.配置webpack.config.js

var path = require('path');
module.exports = {
entry: './src/main.js',
output: {
path: './dist',
publicPath: 'dist/',
filename: 'build.js'
},
babel: {
presets: ['es2015'],
plugins: ['transform-runtime']
},
//配置自动刷新,如果打开会使浏览器刷新而不是热替换
/*devServer: {
historyApiFallback: true,
hot: false,
inline: true,
grogress: true
},*/
module: {
loaders: [
//转化ES6语法
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
},
//解析.vue文件
{
test: /\.vue$/,
loader: 'vue'
},
//图片转化,小于8K自动转化为base64的编码
{
test: /\.(png|jpg|gif)$/,
loader: 'url-loader?limit=8192'
}
]
},
vue: {
loaders: {
js: 'babel'
}
},
resolve: {
// require时省略的扩展名,如:require('app') 不需要app.js
extensions: ['', '.js', '.vue'],
// 别名,可以直接使用别名来代表设定的路径以及其他
alias: {
filter: path.join(__dirname, './src/filters'),
components: path.join(__dirname, './src/components')
}
}
}

四、编译调试

  上图为编译之后的效果

  调试用命令

webpack --display-modules --display-chunks --config webpack.config.js

webpack打包vue的更多相关文章

  1. webpack打包vue文件报错,但是cnpm run dev正常,最后我只想说:是我太笨,还是webpack4.4版本太坑

    最近做一个项目,需要使用webpack打包 .vue 文件的单页面应用,调试都正常,使用cnpm run dev 都可以,就是webpack打包时报错.如下: ERROR in ./src/App.v ...

  2. webpack打包vue项目之后生成的dist文件该怎么启动运行

    亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行. 我的vue项目结构如下: 1. 进入该vue项目目录,打开git bash,执行:npm run b ...

  3. webpack打包vue单文件组件

    一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...

  4. 使用webpack打包vue工程

    记得去年十月份的时候,自己在研究webpack,当时只是知道大致的用法,写了一个简单的demo,现在,经过了7个月对公司产品架构的使用,以及对vue-cli的使用,在了解了实际应用中各种需求之后,我自 ...

  5. webpack打包vue -->简易讲解

    ### 1. 测试环境: 推荐这篇文章:讲的很细致 https://www.cnblogs.com/lhweb15/p/5660609.html 1. webpack.config.js自行安装 { ...

  6. 关于webpack打包vue后vendor包过大的问题

    因为项目用到了elementUI,打包之后包括vue.axios.elementui之类的加起来有500kb,页面第一次打开会出现一阵白屏显示.在百度过后发现可以使用外链接而不用模块包. 博主使用的外 ...

  7. 如何做到在webpack打包vue项目后,在外部动态修改配置文件

    在我们做完vue项目后,只需要执行 npm run dist 就可以轻松进行打包转测试,可是如果我们临时需要修改一些配置文件比如域名,这时候我们就有点懵逼了,那就修改了再重新打一次包? NO NO N ...

  8. webpack打包.vue文件

    在webpack中配置.vue组件页面的解析(vue-loader) 结合webpack使用vue-router 在webpack中配置.vue组件页面的解析 1.运行npm i vue -S将vue ...

  9. 16.如何做到webpack打包vue项目后,可以修改配置文件

    问题描述: 前端需要修改restful API的url,但是打包之后,配置文件找不到了,如果在npm run build 生成dist后,这个配置也被写死了,传到运行的前端服务器上后,假设某次,api ...

随机推荐

  1. PHP 5.x和PHP 7 Closure不同行为问题

    同样一段闭包代码,PHP 7 ok的,PHP 5.5.11(Windows 开发机器)上却报错,以为是PHP 5 bug,原来是用法不对,记录一下~ 原代码(自己写的框架的路由部分)最初是这样写的: ...

  2. vue学习笔记:在vue项目里面使用引入公共方法

    首先新建一个文件夹:commonFunction ,然后在里面建立 一个文件common.js 建立好之后,在main.js里面引入这个公共方法 最后是调用这个公共方法 测试一下,我在公共方法里面写了 ...

  3. js-day04--Ajax应用--二级联动

    Ajax概述和实用需求 Ajax介绍/阿贾克斯:一.Ajax不是一项具体的技术,而是几门技术的综合应用. Javascript.XHTML和CSS.DOM.XML和XMLHttpRequest.二.A ...

  4. 【kafka学习之五】kafka运维:kafka操作日志设置和主题删除

    一.操作日志 首先附上kafka 操作日志配置文件:log4j.properties 根据相应的需要设置日志. #日志级别覆盖规则 优先级:ALL < DEBUG < INFO <W ...

  5. 【RL-TCPnet网络教程】第5章 PHY芯片和STM32的MAC基础知识

    第5章        PHY芯片和STM32的MAC基础知识 本章节为大家讲解STM32自带的MAC和PHY芯片的基础知识,为下一章底层驱动的讲解做一个铺垫. 5.1   初学者重要提示 5.2    ...

  6. [Swift]LeetCode258. 各位相加 | Add Digits

    Given a non-negative integer num, repeatedly add all its digits until the result has only one digit. ...

  7. [Swift]LeetCode298. 二叉树最长连续序列 $ Binary Tree Longest Consecutive Sequence

    Given a binary tree, find the length of the longest consecutive sequence path. The path refers to an ...

  8. [Swift]LeetCode344. 反转字符串 | Reverse String

    Write a function that takes a string as input and returns the string reversed. Example 1: Input: &qu ...

  9. 微信小程序自定义导航栏

    微信小程序需要自定义导航栏,特别是左上角的自定义设置,可以设置返回按钮,菜单按钮,配置如下: 1.在app.json的window属性中增加: navigationStyle:custom 顶部导航栏 ...

  10. 第二周 IP通信基础回顾

    这周我们学习了OSI参考模型,了解局域网的分层为接入层,汇聚层,核心层.网络划分为通信直网,资源直网.osi模型概述在主动间数据传输为应用层,表示层,会话层:底层数据l流为传输层,网络层,数据链路层, ...