提示： 文中代码片段可能会在本文上传后格式被压缩，感兴趣的童鞋请复制代码到ide中格式化后查看，敬请谅解！
webpack
wenpack简介
- webpack是一个JavaScript应用的静态模块打包工具
- 前端模块化标准：AMD 、CMD 、 CommonJS 、 ES6
- 并且打包后将模块化的代码转换成浏览器能正常执行的代码
- 并且在通过模块化开发完成了项目后，还需要处理模块间的各种依赖，并且将其进行整合打包
- 而且不仅仅是JavaScript文件，开发中使用的Css，图片，json文件等等在webpack中可以被当作模块来使用
- 在打包过程中，还可以对资源进行处理，比如压缩图片，将scss，less转换成css，将ES6的语法转成ES5语法，将TypeScript转成JavaScript等操作
webpack安装
- 安装webpack首先需要安装Node.js，Node.js自带了软件包管理工具 npm
- 查看自己的node版本：命令：node -v
- 全局安装webpack(这里指定版本号3.6.0，因为vue vli2依赖此版本)命令： npm install webpack@3.6.0 -g (-g 表示全局安装)
- 局部安装webpack（后续才需要）命令： npm install webpack@3.6.0 –save-dev (–save-dev 是开发时依赖，项目打包后不需要继续使用的)
- 为什么全局安装后还需要局部安装在终端直接执行webpack命令，使用的是全局安装的webpack当在package.json中定义了scripts时，其中包含了webpack命令，那么使用的是局部的webpack
webpack的使用
基本打包命令
- 基本的打包命令 webpack 需要打包入口文件 打包后的文件路径 （webpack ./src/mian.js ./dist/bundle.js)在html中就直接引用这个打包后的js文件
webpack的配置
package.json 的配置
- 最好是自己手动创建一个该文件， 与src目录同层级
- 他也会在执行 npm init 命令后自动生成
- 一旦项目需要对node相关的包进行依赖的时候，首先对项目进行初始化 命令 npm init
- package.json文件结构如下
{
"name": "meetwebpack", //包名
"version": "1.0.0", //版本号
"description": "", //描述
"main": "index.js", //入口文件名
"scripts": { //脚本（命令映射）
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
}, "author": "", //作者
"license": "ISC", //开源协议
"devDependencies": { //开发时依赖的东西
"webpack": "^3.6.0"
}, "dependencies":{ //运行时依赖
},}- 如果package.json文件还依赖一些东西的话，这时候执行一下 npm install 命令，他会自动解决这些依赖
- 脚本（命令映射）：
- 当执行 npm run build 命令的时候，相当于执行了 webpack 命令
- 当执行 npm run test 命令的时候 相当于执行了 echo “Error: no test specified” && exit 1 命令
- npm run 什么，就会去脚本中查找对应被映射的命令
- 为了开发中不出错，最好在项目目录本地安装 webpack，命令： npm install webpack@3.6.0 –save-dev
- 本地安装完成后，项目目录下会多出一个node_modules 文件夹
- 这样安装webpack就是开发时依赖，也就是说只有开发的时候才需要使用，真正运行上线的时候不需要这个
- package.json中的scripts的脚本在执行时，会按照一定的顺序寻找对应命令的位置
- 首先会寻找本地的node_modules/.bin路径中对应的命令
- 如果没有找到，会去全局的环境变量中寻找
webpack.config.js配置
- 手动创建一个该文件在src目录同层级
//导入path模块，用于动态获取出口文件夹的绝对路径
const path = require(\'path\');
/*webpack配置文件应该导出一个对象*/module.exports = { entry: \'./src/main.js\',
output: {
path: path.resolve(__dirname, \'dist\'),
filename: \'bundle.js\'
}};- entry：入口，要打包的入口文件路径
- output：出口对象
- path：打包后生成的文件路径，使用path.resolve(__dirname, \’文件夹名字\’), 这个函数会将node中的上下文和我们的文件夹名字进行拼接，形成最终打包文件存放的一个绝对路径
- filename：打包后的文件名
- 配置完成后直接执行命令 webpack 会自动对入口文件进行打包
loader
- 开发中不仅仅只有基本的js代码的处理，也需要加载css，图片，也包括一些高级的将ES6转成ES5代码，将less，sass转成css，将.jsx，.vue文件转换成js文件等等，对于webpack本身的功能来说，对于这些转化时不支持的，这时候就需要给webpack扩展对应的loader
- 开发中可以把css文件页当成模块，当入口文件mian.js对其有依赖的时候，webpack也会将其打包
//依赖其他js文件中的东西
import {flag, person} from \'./js/a.js\';
console.log(flag);
console.log(person);
//依赖css，只需要依赖，不需要变量
require(\'./css/normal.css\');loader中文网站： https://www.webpackjs.com
步骤一：通过npm安装需要使用的loader
- 例如安装css的loader
npm install --save-dev css-loader步骤二：在webpack.config.js中的module关键字下进行配置
const path = require(\'path\');
module.exports = {
entry: \'./src/main.js\',
output: { path: path.resolve(__dirname, \'dist\'),
filename: \'bundle.js\'
}, module: {
rules: [ { test: /\.css$/,
use: [\'css-loader\' ]
} ] }};- css – loader只负责加载，不负责解析，所以安装了css loader在打包后的网页时没有css效果的
- 这时候需要安装style loader
npm install style-loader --save-dev- 安装完成之后需要与css loader结合使用
module: {
rules: [
{ test: /\.css$/, use: [ \'style-loader\', \'css-loader\' ]
} ] }- style-loader负责将样式添加到DOM中生效
- 使用多个loader时，webpack是从右往左读，先应用css-loader，再应用style-loader
less文件处理
- 如果在项目中使用less，sass，stylus来写样式，这里以less为例，其他也是一样
- 在入口js文件中依赖less
import {flag, person} from \'./js/a.js\';
console.log(flag);
console.log(person);
//依赖CSS
require(\'./css/normal.css\');
//依赖less
require(\'./css/special.less\');- 安装less-loader
npm install --save-dev less-loader less- 配置less-loader
const path = require(\'path\');
module.exports = {
entry: \'./src/main.js\',
output: { path: path.resolve(__dirname, \'dist\'),
filename: \'bundle.js\'
}, module: {
rules: [ { test: /\.css$/,
use: [ \'style-loader\', \'css-loader\' ]
}, { test: /\.less$/,
use: [{ loader: "style-loader"
}, { loader: "css-loader"
}, { loader: "less-loader"
}] } ] }};webpack图片文件的处理
- 例如css代码中依赖了图片
body{
background: url("../img/2.jpg");
}- 这时候打包会出错
- 需要安装处理图片的loader
npm install --save-dev url-loader- 配置
const path = require(\'path\');
module.exports = {
entry: \'./src/main.js\',
output: {
path: path.resolve(__dirname, \'dist\'),
filename: \'bundle.js\'
},
module: {
rules: [
{
test: /\.(png|jpg|gif|jpeg)$/,
use: [
{
loader: \'url-loader\',
options: {
limit: 8192
}
}
]
}
]
}
};- limit：规定大小，单位：字节，当加载的图片小于limit时，会将图片编译成base64字符串形式，如果大于limit，它会使用file-loader来对图片进行加载，file-loader不需要特别的配置，只需要安装一下
npm install --save-dev file-loader- 通过file-loader的方式加载图片的时候，他会把图片进行打包到dist文件夹中，形成一个新的文件，这时候原本代码中就读取不到这个新的图片文件了，这时候需要在webpack.config.js文件中的output中进行配置publicPath
module.exports = {
entry: \'./src/main.js\',
output: {
path: path.resolve(__dirname, \'dist\'),
filename: \'bundle.js\',
publicPath: \'dist/\'
}}- 这样一来，在读取大小超过limit的图片时，他会自动的给使用图片路径的前面添加上publicPath的属性 打包后的文件应用到DOM中
- 这时候webpack会自动生成一个非常长的文件名字
- 这是一个32位的hash值，目的是防止文件名重复
- 但是真实开发中，可能会对打包的图片名有一定的要求，比如，将所有图片放在一个文件夹中，跟上图片原来的名称，同时也要防止重复 img/name.hash
- 在url-loader中的options里面还可以添加如下选项
- img：文件要打包到的文件夹
- name：获取图片原来的名字，放在该位置
- hash：8：为了防止图片片名称冲突，依然使用hash，但是我们只保留8位
- ext：使用图片原来的扩展名
{
test: /\.(png|jpg|gif|jpeg)$/,
use: [
{
loader: \'url-loader\',
options: {
limit: 13000,
name: \'img/[name].[hash:8].[ext]\'
}
}
]
}- 其中的 name: \’img/[name].[hash:8].[ext]\’
- img/：打包后生成的文件夹
- [name] : 这是一个变量，获取图片原来的名字
- [hash:8] : 防止文件名冲突，生成8位hash值
webpack ES6转ES5的babel
- 在webpack中，直接使用babel对应的loader就可以了
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015- 配置webpack.config.js文件
const path = require(\'path\');
module.exports = {
entry: \'./src/main.js\',
output: { path: path.resolve(__dirname, \'dist\'),
filename: \'bundle.js\',
publicPath: \'dist/\'
}, module: {
rules: [ { test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: { loader: \'babel-loader\',
options: { presets: [\'es2015\']
} } } ] }};webpack使用VUE的配置过程
- 在项目中使用VUE时，必须要对其有依赖，所以需要进行安装，因为在后续实际项目中也会使用vue， 所以并不是开发时依赖
- 安装vue
npm install vue --save- 在项目中使用vue开发，对其进行依赖
import {flag, person} from \'./js/a.js\';
console.log(flag);
console.log(person);
//依赖CSS
require(\'./css/normal.css\');
//依赖less
require(\'./css/special.less\');
//使用vue开发
import Vue from \'vue\';
const app = new Vue({
el: \'#app\',
data:{ message: \'hellow vue\'
}});- 修改完成后重新打包运行程序，打包时候并无报错，但是这时候在html中并不能使用vue相关的东西，因为vue在构建时一共两个版本：
- runtime-only：代码中，不能有任何的template，他会把挂载在el上的 #app当成一个template
- runtime-compiler：代码中可以有template，因为有compiler可以用于编译template
- 默认使用的runtime-only
- 解决办法，在webpack.config.js文件中的 module 后添加 resolve 配置
const path = require(\'path\');
module.exports = { entry: \'./src/main.js\',
output: {
path: path.resolve(__dirname, \'dist\'),
filename: \'bundle.js\',
publicPath: \'dist/\'
}, module: { }, //添加下面的配置 resolve:{ alias:{ \'vue$\': \'vue/dist/vue.esm.js\'
} }};- 这时能正常使用vue相关内容
- html代码：
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<h2>{{message}}h2>
div>
<script src="./dist/bundle.js">script>
body>
html>- js代码
import {flag, person} from \'./js/a.js\';
console.log(flag);
console.log(person);
//依赖CSS
require(\'./css/normal.css\');
//依赖less
require(\'./css/special.less\');
//使用vue开发
import Vue from \'vue\';
new Vue({
el: \'#app\',
data:{ message: \'hellow vue\'
}});创建VUE时template和el关系
- 当前面的步骤正常运行之后：
- 如果我们希望将data中的数据显示在界面中，就必须修改 index.html
- 如果我们定义了组件，也必须修改 index.html来使用组件
- 但是html模板在开发中，并不希望手动的来频繁更改
定义template属性
- 在前面的Vue实例中，定义了el属性，用于index.html中的#app进行绑定，让Vue实例之后可以管理它其中的内容
- 这里，我们可以将div元素中的{{message}}内容更删除掉，只保留一个基本的id为div的元素
- 但是如果依然希望在其中显示 {{message}} 的内容，可以再定义一个template属性，代码如下：
const app = new Vue({
el: \'#app\',
template:`
<h2>{{message}}h2>
div>
`,
data:{ message: \'hellow vue\',
}, methods:{ }});html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
div>
<script src="./dist/bundle.js">script>
body>
html>直接使用.vue文件进行开发
- 配置对应的loader
npm install vue-loader vue-template-compiler --save-dev- 修改webpack.config.js配置文件
const path = require(\'path\');
//导入这个模块const VueLoaderPlugin = require(\'vue-loader/lib/plugin\');
module.exports = { entry: \'./src/main.js\',
output: {
path: path.resolve(__dirname, \'dist\'),
filename: \'bundle.js\',
publicPath: \'dist/\'
}, //添加这个配置 plugins: [ // make sure to include the plugin for the magic
new VueLoaderPlugin() ], module: { rules: [ { test: /\.vue$/, use: [\'vue-loader\']
} ] }, resolve:{ alias:{ \'vue$\': \'vue/dist/vue.esm.js\'
} }};- vue-loader@15.*之后 必须配置带有VueLoaderPlugin 之外，还需另外单独配置css-loader。如果是用最新webpack原生构建，除了安装webpack外，还要安装webpck-cli，在webpack.config中配置mode选项
webpack横幅plugin的使用
- plugin和loader的区别
- plugin主要用于转换某些类型的模块，它是一个转换器
- plugin是插件，它是对webpack本身的扩展，是一个扩展器
- plugin使用过程
- 通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装)
- 在webpack.config.js中的plugins中配置插件
- 以BannerPlugin 插件为例：
const path = require(\'path\');
//1.导入对应的包
const webpack = require(\'webpack\');
module.exports = { entry: \'./src/main.js\',
output: {
path: path.resolve(__dirname, \'dist\'),
filename: \'bundle.js\',
publicPath: \'dist/\'
}, plugins: [ //2.使用插件
new webpack.BannerPlugin("最终版权归Xiao YouXin所有")
], module: { rules: [ { test: /\.vue$/, use: [\'vue-loader\']
} ] }, resolve:{ extensions:[\'.js\',\'.css\',\'.vue\'], //配置省略的扩展名
alias:{ \'vue$\': \'vue/dist/vue.esm.js\'
} }};- 在webpack.config.js中配置插件后重新打包代码，再看 dist文件夹中打包后的bundle.js文件会发现文件第一行出现了注释： 最终版权归Xiao YouXin所有
- webpack-HtmlWebpackPlugin的使用
- 之前的开发，index.html文件是放在项目根目录下的
- 在真实发布项目的时候，发布的是dist文件夹中的内容，但是dist文件夹中如果没有index.html文件，那么打包的js等文件也没有意义了
- 所以，我们需要将index.html文件打包到dist文件夹中，这个时候可以使用HtmlWebpackPlugin插件
- 它可以自动生成一个index.html文件(可以通过指定模板来生成)
- 将打包的js文件，自动通过script标签插入到body中
- 安装HtmlWebpackPlugin插件
npm install html-webpack-plugin --save-dev- 使用插件，修改webpack.config.js文件中的plugins部分内容如下
- 这里的template表示根据什么模板来生成index.html
- 另外，需要删除在之前output中添加的publicPath属性
- 否则插入的script标签src可能会有问题
const path = require(\'path\');
const VueLoaderPlugin = require(\'vue-loader/lib/plugin\');
const webpack = require(\'webpack\');
//1.引入安装插件的模块
const HtmlWebpackPlugin = require(\'html-webpack-plugin\');
module.exports = {
entry: \'./src/main.js\',
output: { path: path.resolve(__dirname, \'dist\'),
filename: \'bundle.js\'
//2.删除output下publicPath属性
}, plugins: [ new VueLoaderPlugin(),
new webpack.BannerPlugin("最终版权归Xiao YouXin所有"),
//3.使用插件
new HtmlWebpackPlugin({
//4.指定生成index.html模板
template: \'index.html\'
}) ], module: { rules: [ { test: /\.vue$/,
use: [\'vue-loader\']
} ] }, resolve:{ extensions:[\'.js\',\'.css\',\'.vue\'], //配置省略的扩展名
alias:{ \'vue$\': \'vue/dist/vue.esm.js\'
} }};- webpack-UglifyjsWebpackPlugin的使用
- 在项目发布之前，需要对js等文件进行压缩处理
- 使用一个第三方插件ugilifyjs-webpack-liugin，并且指定版本号1.1.1，与CLI2保持一致
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev- 修改webpack.config.js文件，使用插件
const path = require(\'path\');
const VueLoaderPlugin = require(\'vue-loader/lib/plugin\');
const Webpack = require(\'webpack\');
const HtmlWebpackPlugin = require(\'html-webpack-plugin\');
//1.引入插件模块
const UglifyjsWebpackPlugin = require(\'uglifyjs-webpack-plugin\');
module.exports = {
entry: \'./src/main.js\',
output: { path: path.resolve(__dirname, \'dist\'),
filename: \'bundle.js\'
}, plugins: [ new VueLoaderPlugin(),
new Webpack.BannerPlugin("最终版权归Xiao YouXin所有"),
new HtmlWebpackPlugin({
template: \'index.html\'
}), //2.使用插件
new UglifyjsWebpackPlugin()
], module: { rules: [ { test: /\.vue$/,
use: [\'vue-loader\']
} ] }, resolve:{ extensions:[\'.js\',\'.css\',\'.vue\'], //配置省略的扩展名
alias:{ \'vue$\': \'vue/dist/vue.esm.js\'
} }};- 这时候重新打包代码后，查看bundle.js文件就会发现这个文件中的代码已经被压缩过了
- 他在压缩之后，代码中所有缩进，注释都会被删除，所以这个插件和BannerPlugin插件只能使用一个，因为代码压缩后，BannerPlugin是没有意义的
webpack-dev-server搭建本地服务器
- webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，实现开发中修改源码后需要重新编译
- 它不是一个单独的模块，在webpack中需要安装
npm install --save-dev webpack-dev-server@2.9.1- devserver也是作为webpack中的一个选项，选项本身可以设置以下属性：
- contentBase：为哪一个文件夹提供本地服务，默认是根文件夹，这里需要填写 ./dist
- port：端口号
- inline：页面实时刷新
- historyApiFallback：在SPA页面中，依赖HTML5的history模式
- webpack.config.js文件配置修改：
const path = require(\'path\');
const VueLoaderPlugin = require(\'vue-loader/lib/plugin\');
const Webpack = require(\'webpack\');
const HtmlWebpackPlugin = require(\'html-webpack-plugin\');
//const UglifyjsWebpackPlugin = require(\'uglifyjs-webpack-plugin\');
module.exports = {
entry: \'./src/main.js\',
output: { path: path.resolve(__dirname, \'dist\'),
filename: \'bundle.js\',
//publicPath: \'dist/\'
}, plugins: [ new VueLoaderPlugin(),
new Webpack.BannerPlugin("最终版权归Xiao YouXin所有"),
new HtmlWebpackPlugin({
template: \'index.html\'
}), //new UglifyjsWebpackPlugin()
], module: { rules: [ { test: /\.vue$/,
use: [\'vue-loader\']
} ] }, resolve:{ extensions:[\'.js\',\'.css\',\'.vue\'], //配置省略的扩展名
alias:{ \'vue$\': \'vue/dist/vue.esm.js\'
} }, //添加本地服务器配置
devServer:{ contentBase: \'d./dist\',
inline: true
}};- 在package.json文件中 “scripts”下添加命令映射
"scripts": {
"dev": "webpack-dev-server"
}- 然后执行命令 npm run dev 就可以启动本地服务，每次修改代码后无须重新编译，点击控制台中的地址就可以打开浏览器
- 也可以在 “dev”: “webpack-dev-server” 中添加参数 –open 实现自动打开浏览器
内容出处：，
声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/procedure/11777.html
赞 (0)
打赏
微信扫一扫
支付宝扫一扫
微信扫一扫
支付宝扫一扫
VueX使用大全
上一篇
2020-09-21 13:07
TMS v2.26.0发布 开源团队协作Web管理系统
下一篇
2020-09-21 13:13
相关推荐
-
基于java Springboot实现课程评分系统设计和实现
前言： 教师教学评价是教学质量评价的重要内容，随着教育信息化进程的加快，如何在传统教学中运用网络技术来评价教师教学质量，如何在网络教学环境中评价教师教学质量， 是教学管理的难点，也…
-
wordpress”Baidu Sitemap Generator”插件报错且不更新解决办法
本文介绍的解决方法是针对之前已经安装了插件，但是目前使用存在问题的这个现象，若您新装时出现问题，不妨按下面的解决办法修改之后再上传插件进行安装！
-
使用MANSPIDER爬取全网SMB共享中的内容
关于MANSPIDER MANSPIDER是一款资源爬取工具，该工具能够爬取全网SMB共享中我们所感兴趣的内容，并支持通过正则表达式搜索目标文件名或文件内容。 支持得文件类型 PD…
-
工具网站推荐：综合性IP查询网站 ip.sb
之前图床专贴介绍过的sm.ms图床隶属于兽兽旗下，这位大佬极品域名一堆。这不又搞了个专业的IP查询网站ip.sb，域名太好记。IPV4查询用的是ipip.net的商业版，但是比ip…
-
JAVASCRIPT混淆及反混淆代码工具
介绍 在我们开始学习反混淆之前，我们首先要了解一下代码混淆。如果不了解代码是如何混淆的，我们可能无法成功对代码进行反混淆，尤其是使用自定义混淆器对其进行混淆时。 什么是混淆 混…
-
五款顶级的Docker容器GUI工具
你是否还在大量控制台窗口中监控容器，还是对使用终端命令充满热情？而使用Docker的图形用户界面（GUI）工具，则可以更简单的对容器进行管理，并提高效率。而且它们都是免费的。 Po…
-
GridStuio–专为数据科学构建的开源云端Web电子表格应用程序
介绍 GridStuio是一个云端的Web电子表格应用程序，也可以说它是数据科学应用程序，完全集成了开源数据科学框架和语言。与Python编程语言完全集成。它旨在提供用于加载，清理…
-
薄荷叶快速开发平台：MintLeaf-Fast
MintLeaf-Fast MintLeaf-Fast是一个基于SpringBoot2.0开发的，轻量级的，前后端分离的Java快速开发平台。支持在线演示！开箱即用，节省开发时间，…
-
Intellij IDEA必备插件，提高效率的“七种武器”
常言道“工欲善其事必先利其器”，作为一个程序员，一个好的IDE可以起到事半功倍的效果。2020 JVM 生态报告显示 Intellij IDEA 已经成为Java开发者的首选。In…
-
seaweedfs的入门安装体验
引子 今天聊一下SeaweedFS。 SeaweedFS简介 SeaweedFS是一个简单且高度可扩展的分布式文件系统。有两个目标： 存储数十亿个文件！ 快速提供文件！ Seawe…