-
2021-05-12 11:24:01
webpack
1.创建项目并在终端初始化
npm init -y
在项目目录下回生成一个package.json文件
2.在项目目录下创建src文件夹,在src目录下创建index.html文件和index.js文件
index.html内容为:
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
3.在终端安装jQuery
npm install jquery -S //npm i jquery 建议这样写
会在项目目录下生成一个package-lock.json文件和node_modules文件夹(这个文件夹可以删掉,后续需要的话可以重新下载,命令:npm i)
4.向index.js填充内容,并实现功能
导入jQuery
import $ from "jquery"
index.js内容
import $ from "jquery"; $(function () { $("li:odd").css("background", "pink"); $("li:even").css("background", "orange"); })
在index.html内导入index.js
<script src="./src/index.js"></script>
src路径按照自己创建的路径为准
浏览器报错:
Uncaught SyntaxError: Cannot use import statement outside a module
安装webpack的原因:
因为**import $ from “jquery”**是ES6的语法代码,浏览器存在兼容性问题,所以需要安装webpack,将高版本的语法编程浏览器可以识别的语法,webpack只能打包js文件
安装webpack步骤:
1.在终端输入命令:
npm install webpack webpack-cli -D //若有报错就试试把-D改为-g
2.在项目根目录下创建一个webpack.config.js的配置文件来配置webpack。
向webpack.config.js添加内容:
module.exports = { mode:"development", }
mode设置的是项目的编译模式,可以设置的两个值:
development(开发模式):表示项目处于开发阶段,不会进行压缩和混淆,打包速度会快一些
production(发布模式):表示项目处于发布阶段,会进行压缩和混淆,打包速度会慢一些
3.向项目目录下的package.json文件添加运行脚本dev:
"scripts":{ "dev":"webpack" }
这个dev是自定义命名的
4.运行dev命令进行项目打包
在终端输入命令,将会启动webpack进行项目打包
这里的dev是第三步里面的dev,第三步命名什么这里的就是什么
npm run dev
成功后会在项目目录下成成一个dist文件夹,文件夹下有一个main.js文件
在index.html中修改导入的js文件
<script src="../dist/main.js"></script>
页面效果渲染正确
在此之前,修改之后,都要用npm run dev进行打包,打包之后,效果才会改变
设置webpack的打包入口/出口
在webpack 4x中,
会默认将src/index.js作为默认的打包入口js文件;
会默认将dist/main.js作为默认的打包输出js文件;
如果不想使用默认的入口/出口js文件,可以通过改变webpack.config.js来设置入口/出口的js文件:
const path = require("path"); module.exports = { // development开发模式、production发布模式 mode: "development", // 设置入口文件路径 entry: path.join(__dirname, "./src/index.js"), // 设置出口文件 output: { // 设置路径 path: path.join(__dirname, "./dist"), // 设置文件名 filename: "bundle.js" } }
设置webpack的自动打包
修改js文件中的代码后,需要重新运行命令npm run dev打包webpack,才能生成出口的js文件
1.安装自动打包功能的包:webpack-dev-server
在终端输入:
npm install webpack-dev-server -D
2.修改package.json中的dev指令
"scripts": { "dev": "webpack-dev-server" },
webpack-dev-server自动打包的输出文件(bundle.js),默认放到了服务器的根目录下
自动打包完毕后,默认打开服务器网页
解决:在package.json中的dev指令
webpack 5与webpack-dev-server 3 兼容性问题
"scripts": { "dev": "webpack serve --open Chrome.exe" },
在这里可能会出现:
[webpack-cli] Would you like to install 'webpack-dev-server' package? (That will run 'npm install -D webpack-dev-server') (Y/n)
Y,然后回车就可以了
在终端执行npm run dev后,会自动跳转到浏览器
浏览器默认访问的地址为:http://localhost:8080/
3.修改index.html中js文件的路径
bundle.js会保存到内存里面(在根目录下面),而不是在dist文件夹下面的那个
<script src="/bundle.js"></script>
在此之后,修改相关文件后,保存即可,不用再执行命令npm run dev,也不用跳转到浏览器去,会自动跟随保存更新的
但是这里一开始浏览器打开的是项目目录页面(文件和文件夹),而不是index.html页面,需要自行点开src文件夹才打开index.html页面
生成预览页面——html-webpack-plugin
在内存里面(根目录)生成一个预览页面而不是在本地生成
实现步骤:
1.安装默认预览功能的包:html-webpack-plugin
npm install html-webpack-plugin -D
2.修改webpack.config.js文件:
//导包 const HtmlWebpackPlugin = require("html-webpack-plugin"); // 创建对象 const htmlPlugin = new HtmlWebpackPlugin({ //是键值对,用:相连的,而不是用=号,后面加逗号 // 设置生成预览页面的模板文件 template: "./src/index.html", // 设置生成的预览页面名称 filename:"index.html", }) module.exports = { ...... plugins: [htmlPlugin] }
设置完,npm run dev之后打开的就是index.html页面了
webpack中的加载器(loader)
通过loader打包非js模块:在默认情况下,webpack只能打包js文件,如果下载想要打包非js文件,需要调用loader加载器才能打包
loader加载器包含:
1).less-loader:处理less文件
2).sass-loader
3).url-loader:打包处理css中与url路径有关的文件
4).babel-loader:处理高级js语法的加载器
5).postcss-loader
6).css-loader,style-loader
**注意:**指定多个loader时的顺序是固定的,而调用loader的顺序是从后往前进行调用的
安装style-loader,.css-loader来处理样式文件
1.安装包
在终端输入
npm install style-loader css-loader -D
2.配置规则:更改webpack.config.js的module中的rules数组
plugins: [htmlPlugin], //这是前面添加过的 module: { rules: [{ // test设置需要匹配的文件类型,支持正则\.是.,前面的\是解析的意思,$是文件名一定要是.css结尾 test: /\.css$/, // use表示该文件类型需要调用的loader(加载器) use: ['style-loader', 'css-loader'], }] }
在项目目录下的src文件夹下面创建一个css文件夹,在css文件夹下面创建一个index.css文件,自行添加内容
在入口文件index.js中引入(导入)index.css文件
import "./css/index.css";
因为导入的是一个文件,所以不用from
最后在终端执行npm run dev 命令即可
安装less,less-loader,来处理less文件
1.安装包
npm install less-loader less -D
2.配置规则:更改webpack.config.js的module中的rules数组
rules: [ // 这里是css文件的配置规则 { // test设置需要匹配的文件类型,支持正则 test: /\.css$/, // use表示该文件类型需要调用的loader(加载器) use: ['style-loader', 'css-loader'], }, // 这里是less文件的配置规则 { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'], } ]
在css文件夹下创建一个index.less文件,自定义内容为:
ul{ li{ color: white; } }
在index.js中导入index.less文件
import "./css/index.less";
最后在终端执行npm run dev 命令即可
安装sass-loader,node-sass处理scss文件
1.安装包
npm install sass-loader node-sass -D
这一步可能会失败会报错(因为npm是从国外拿数据的),解决方案如下:
解决方案一:
设置全局镜像源:
npm config set sass_binary_site https://npm.taobao.org/mirrrors/node-sass/
然后再重新安装
npm install sass-loader node-sass -D
解决方案二:
npm install -g cnpm --registry=https://registry.npm.taobao.org
然后再执行命令:
cnpm install sass-loader node-sass --save-dev
解决方案三:
安装python,安装目录必须在C:/Python27
然后执行命令:
cnpm install sass-loader node-sass --save-dev
2.配置规则:更改webpack.config.js的module中的rules数组
module: { // rules里面存放的是对象 rules: [ // 这里是css文件的配置规则 { // test设置需要匹配的文件类型,支持正则 test: /\.css$/, // use表示该文件类型需要调用的loader(加载器) use: ['style-loader', 'css-loader'], }, // 这里是less文件的配置规则 { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'], }, // 这里是scss文件的配置规则 { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'], } ] }
在css文件夹下创建index.scss文件(后缀名一定是scss,而不是sass),自定义内容:
ul { li{ border: 1px solid blue; margin: 10px auto; } }
在index.js中引入index.scss文件
import "./css/index.scss";
最后在终端执行npm run dev 命令即可
打包样式表的图片以及字体字体
使用url-loader和file-loader来处理
1.安装包
cnpm install url-loader file-loader -D
如果在这里报错的话,就试试先执行下面的命令再进行安装,
npm install -g cnpm --registry=https://registry.npm.taobao.org
2.配置规则:更改webpack.config.js的module中的rules数组
// 图片的配置规则 { // 设置图片的后缀名 test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, // limit用来设置字节数,只有小于limit值的图片,才会转换 use: "url-loader?limit=16940", }
在index.html中添加一个div
<div class="box"> </div>
在index.css中添加相关样式
.box { width: 200px; height: 200px; border: 1px solid firebrick; background-image: url(../img/sortPhone_03.png); }
最后在终端执行npm run dev 命令即可
如果在index.html中直接添加图片,浏览器中是不显示的
<img src="./img/sortPhone_03.png" alt="">
因为装了插件,所以图片到内存里面去了,地址就要改一改
<img src="/src/img/sortPhone_03.png" alt="">
最后在终端执行npm run dev 命令即可
打包js文件中的高级语法
如果是webpack 4版本的话,可能要装一下,如果是5的话,可以不用搞这一步
安装babel系列的包
1.安装babel转换器
npm install babel-loader @babel/core @babel/runtime -D
2.安装babel语法插件包
npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
3.在项目根目录下创建并配置babel.config.js文件
module.exports={ presets:["@babel/preset-env"], plugins:["@babel/plugin-transform-runtime","@babel/plugin-proposal-class-properties"] }
4.配置规则:更改webpack.config.js的module中的rules数组
{ test:/\.js$/, use:"babel-loader", exclude:/node_modules/ }
Vue单文件组件
vue安装Vetur插件可以使得.vue文件中的代码高亮
配置.vue文件的加载器
1.安装vue组件的加载器
npm install vue-loader vue-template-compiler -D
上一个命令不可以的话就试试下面这个命令
cnpm install vue-loader vue-template-compiler -D
4.配置规则:向webpack.config.js添加一些内容
const VueLoaderPlugin = require("vue-loader/lib/plugin"); const vuePlugin = new VueLoaderPlugin(); module.exports ={ plugins: [htmlPlugin, vuePlugin], module: { rules:{ ......其他规则 // vue文件的配置规则 { test: /\.vue$/, loader: "vue-loader" } } } }
在webpack中使用vue
1.安装vue
npm install vue -S
上面命令报错就使用下面的命令
cnpm install vue -S
2.在index.js中导入vue
import Vue from "vue";
3.在inde.html中创建:
<div id="app"> </div>
在src文件夹下创建test.vue文件,内容为
<template> <!-- 这里面内容自定义 --> <div>hello</div> </template> <script> export default {}; </script> <style> </style>
4.在index.js中创建Vue实例对象,并引入test.vue
import test from "./test.vue"; const vm = new Vue({ el: "#app", // render函数渲染单文件组件 //h()里面test是上面import来的test render: (h) => h(test), })
可能有个报错:
DevTools failed to load SourceMap: Could not load content for webpack://package/node_modules/sockjs-client/dist/sockjs.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
module.exports ={ plugins: [htmlPlugin, vuePlugin], //加上这个配置 devtool: 'inline-source-map', }
使用webpack打包发布项目
1.配置package.json
"scripts": { "dev": "webpack serve --open Chrome.exe", //"build": "webpack -p" 这是webpack4版本的写法 "build": "webpack" },
2.项目打包
npm run build
在项目打包(npm run build)之前,可以将dist目录删除,打包完成后会生成全新的dist目录
dist文件夹下生成一个bundle.js文件和一个index.html文件,就说明打包成功
更多相关内容 -
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
2020-11-28 18:39:291.vue中的vue-cli打包 最近在用vue写一个小项目,其中就用到了vue脚手架工具vue-cli,在测试打包后能否运行过程中遇到不少问题,而且在网上这些问题答案都不太好找,废话不多说,进入正题。 a.执行打包命令:npm run... -
关于vue项目使用webpack打包后dist下的index.html打开后空白的问题
2020-10-05 10:23:43由于vue-cli3之后不需要手动配置webpack.config.js文件,因此可以这样进行vue项目的打包 如你生成的dist文件下的index.html为空白文件,即vue.config.js中的publicpath:’/'和上图中的不一样,修改一样后即可解决此...由于vue-cli3之后不需要手动配置webpack.config.js文件,因此可以这样进行vue项目的打包
如你生成的dist文件下的index.html为空白文件,即vue.config.js中的publicpath:’/'和上图中的不一样,修改一样后即可解决此问题
此外执行命令时,若package.json中无build指令,则执行npm run build:prod生成dist文件。 -
VUE使用Webpack打包路径问题
2021-03-07 07:41:55使用Webpack进行项目打包,容易出现引用资源路径错误问题。总结一下一、webpack打包指令npm run build二、webpack打包后生成dist文件,将dist文件夹中的文件,放在服务器上1、如果页面空白,报错资源的引用路径不对...使用Webpack进行项目打包,容易出现引用资源路径错误问题。总结一下
一、webpack打包指令
npm run build
二、webpack打包后生成dist文件,将dist文件夹中的文件,放在服务器上
1、如果页面空白,报错资源的引用路径不对
解决:找到 config > index.js
build: {
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
// assetsPublicPath: '/',
// 在/前边+ .
assetsPublicPath: './',
}
2、如果图片不显示
图片路径实例:
在src > assets > img > index.jpg 放置图片
在src > components > home > Home.vue 引用
.home-bg
background-image: url("../../assets/img/index.jpg")
打包生成文件后,图片加载路径会出问题。
解决:找到 build > utils.js
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../'
// 添加publicPath: '../../'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
三、再次打包
----end------
PS:引用图片路径很长,可以通过设置引用路径,来简写代码。比如:
background-image: url("~assets/img/index.jpg")
-
vue项目webpack打包配置
2022-05-03 10:19:21文章目录基于vue/cli3.0+脚手架搭建Vue项目(12)前言一、webpack配置1.配置vue.config.js2.配置DllPlugin提高构建和打包速度二、打包验证总结 前言 一、webpack配置 1.配置vue.config.js publicPath: './', ...基于vue/cli3.0+脚手架搭建Vue项目(12)
前言
一、webpack配置
1.配置vue.config.js
publicPath: './', outputDir: 'dist', assetsDir:"static", indexPath:'index.html',
2.配置DllPlugin提高构建和打包速度
1:项目根目录新建dll.js文件
const path = require('path') const webpack = require('webpack') module.exports = { entry: { vendor: [ 'vue-router', 'element-ui'] }, output: { // 配置输出文件存放在本地的目录 path: path.join(__dirname, 'dllFiles'), filename: '[name].js', library: '[name]_[hash]' }, plugins: [ new webpack.DllPlugin({ // DllPlugin的name属性需要和libary保持一致 name: '[name]_[hash]', //指定当前目录 path: path.join(__dirname, '.', '[name]-manifest.json'), // context需要和webpack.config.js保持一致 context: __dirname }) ] }
2:webpack-cli依赖的安装
npm install webpack-cli -D
3:package.json文件的
scripts
内添加dll
运行命令行,顺便注意下面的"build": "vue-cli-service build --no-module"
,添加了后缀--no-module
"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build --no-module", "dll": "webpack --config ./dll.js" },
运行指令:
npm run dll
此时会在根目录生成
vendor-manifest.json
文件和dllFiles
文件夹
4:根目录的webpack.config.js文件配置dll(tip:也可以用vue.config.js文件configureWebpack配置)module.exports = { // ...其他配置 // 配置dll plugins: [ new webpack.DllReferencePlugin({ context: __dirname, // manifest就是我们第3步中打包出来的json文件 manifest: require('./vendor-manifest.json'), }) ] }
二、打包验证
运行指令:
npm run build
打包好的文件部署在服务端后:
运行服务地址:http://47.106.123.118:8080/#/,获取登录页面账号和密码可查看之前文章:vue项目axios的封装和使用
总结
要想把生人变成熟人,就要找到这个人的熟人。
-
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
2020-12-12 19:49:21亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行。 我的vue项目结构如下: 1. 进入该vue项目目录,打开git bash,执行:npm run build(在package.json的scripts配置) 执行成功如下... -
vue+webpack 打包文件 404 页面空白的解决方法
2020-11-30 11:15:33最近用vue-cli+vue-router+webpack建立项目,其中的遇到的三个问题,整理如下: vue-cli+ webpack 建立的项目,cnpm run build 打包项目之后,需要放在http服务器上才可以运行, 例如 :nginx vue单页面的启动页面是... -
webpack打包vue项目之后生成的dist文件本地运行
2022-03-14 09:58:02本地测试打包文件 -
VUE如何使用webpack进行项目打包
2021-08-12 15:40:00一 安装NODEJS,NPM 二建一个目录名子随意 在目录里打开终端运行npm init -y 生成...四建立webpack.config.js 打包配制文件(这里可以通过entry.output设置打包入口入输出) module.exports={ //如果上的的时候... -
使用webpack打包后的vue项目如何正确运行(express)
2020-12-08 18:49:19我们知道使用webpack打包vue项目后会生成一个dist文件夹,dist文件夹下有html文件和其他css、js以及图片等,那么打包后的文件该如何正确运行呢? 倘若直接打开html文件,会报如下错误: 那么该如何运行呢?... -
关于如何使用webpack打包dist文件
2021-09-29 10:27:58首先我使用的vue里自带build可以直接打包 创建一个webpack.config.js在这个文件夹里加入以下代码 然后直接npm run build就可以了 constpath=require("path");//nodejs内置模块 constHtmlWebpackPlugin=require... -
Vue项目webpack打包部署到linux服务器的Tomcat
2022-03-15 16:24:12新建Vue项目webpack打包,部署到Linux服务器Tomcat上。 2,在Linux服务器下的Tomcat的webapps下创建VueTest文件夹, 3,配置router/index.js文件,增加base: '/VueTest',VueTest就是Tomcat中webapps下文件路径 4... -
webpack打包vue项目进行打包优化
2021-08-07 20:37:24当项目上线后,用户不可能页通过localhost:8080访问我们的页面,只能把项目放到服务器中,才能提供给用户访问,所以vue-cli内部集成的webpack,把vue、less、js等打包成浏览器可直接执行的代码。 二、进行打包 ... -
解决vue-cli webpack打包后加载资源的路径问题
2020-12-10 23:48:40vue项目,访问打包后的项目,输入路径后,页面加载空白。这时会有两类问题,都是路径问题。 1.一个是css,js,ico等文件加载不到,是目录里少了dist 打开页面时一片空白 解决办法: config/index.js文件的build->... -
解决vue 项目使用webpack打包后,直接打开dist文件夹下的index.html页面空白的问题
2021-06-10 16:01:27解决vue 项目使用webpack打包后,直接打开dist文件夹下的index.html页面空白的问题2020年07月11日|萬仟网IT编程 |我要评论问题描述vue项目完成后,输入npm run build命令,会生成dist文件,本地打开dist/index.html... -
VUE项目使用WebPack打包删除注释和console、debugger插件集成
2021-11-16 16:20:33使用的组件是【uglifyjs-webpack-plugin】。 第一步 在package.json中增加依赖。 "devDependencies": { "uglifyjs-webpack-plugin": "^1.3.0" } 增加依赖后,需要npm安装一下 cnpm install -all 第二步 在vue.... -
如何使用webpack打包一个库library的方法步骤
2021-01-21 11:47:32日常我们开发了一个库之后,如何打包之后提供给别人使用呢?如果你不清楚,就继续看吧!!! 初始化库 mkdir library cd library npm init -y 经过以上步骤后会生成一个library文件夹,里面包含一个package.json... -
vue项目的webpack打包优化
2021-10-29 15:58:35我第一次从搭建项目环境,到打包准备上线测试,vue对开发者来说学习成本不高,带来了很多的便利。没有经过如何优化,直接打包出来,打开页面时就看到无尽的加载中。。。 啥???是网络不好了??? 等了半分钟... -
vue项目webpack打包优化
2020-05-23 16:54:38常用的webpack打包优化点实践。 -
VUE使用webpack插件实现自定义打包过程(vue.config.js)
2022-05-20 17:47:56一、package.json 引入插件 copy-webpack-plugin "devDependencies": { "copy-webpack-plugin": "^11.0.0", }, 二、vue.config.js配置插件 const {defineConfig} = require('@vue/cli-service') const ... -
Vue基础知识总结 9:vue webpack打包原理
2021-10-02 12:32:02???? Java学习路线:搬砖工逆袭Java架构师 ???? 简介:Java领域优质创作者?...、CSDN哪吒公众号作者✌ 、Java...并且不仅仅是JavaScript文件,还有CSS、图片、json文件等等,在webpack中都可以被当做模块来使用。 二、打 -
webpack打包5之配置清除dist目录插件
2021-09-03 14:59:39为了解决这个问题需要配置一个清包插件,每次执行打包会自动删除dist包需要用到clean-webpack-plugin 1、安装 yarn add clean-webpack-plugin -D 2、引入 const {CleanWebpackPlugin} = require('clean-webpack-... -
vue后台管理系统webpack打包上线优化
2022-03-15 00:14:15打包项目优化: 生成打包报告 第三方库使用CDN 优化ElementUI的打包 EltUI组件按需加载 路由赖加载 去console语句 去map文件 为开发环境和生成环境设置不同打包入口(项目有main-dev.js和main-pro.js) ... -
vue--webpack打包工具
2022-01-22 16:39:43作用: 由于一些浏览器不支持es6,所以出现了一个打包工具,将前端代码统一打包成es5 打包工具 ...使用webpack打包项目 创建一个包:vue-webpack-study 创建hello.js //暴露一个方法 exports.sayHi = -
VUE-webpack超详细教程
2022-01-21 16:51:05webpack其中一个核心就是让我们可能进行模块化开发,并且会帮助我们处理模块间的依赖关系,而且不仅仅是JavaScript文件,CSS、图片、json文件等等在webpack中都可以被当做模块来使用 打包: 合并成一个或多个包... -
Vue-webpack学习使用
2022-04-23 12:12:08Vue-webpack学习使用 -
vue webpack项目打包优化,从60s到17s的优化之路
2019-03-07 17:51:32下面就进入本文的正题了: 对本文感兴趣的,想必都有一定的开发经验了,对...基于webpack的项目啦都有一个弊端,项目体积越大,打包耗时越长。下面就把我优化项目的案例展示给你。激动么~~~ Vue项目比较大.或... -
Vue项目webpack打包部署到服务器
2017-07-23 22:12:00Vue项目webpack打包部署到服务器 这篇博文主要说的就是我今天遇到的问题,而且在经过我的询问,好多人在打包部署的时候都遇到了一些问题,下面就来说下,如何将Vue项目放置在服务器上,这里以Tomcat为例。 必须要...