webpack工具学习 构建简单vue项目(不依赖vue-cli) webpack4.0
目的用webpack构建简单前端项目
1.npm init (npm init -y) 形成package.json
2.npm install --save-dev webpack 形成 node_modules
3.项目路径dist--index.html src---index.js----test.less webpack.config.js
4.webpack.config.js配置
const path = require('path'); module.exports = {
entry:'./src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname,'dist') //解析到哪个目录
},
module: {
rules: [
{
test:/\.less$/,
use:[
{
loader:"style-loader"
},
{
loader:"css-loader"
},
{
loader:"less-loader"
}
]
}
]
},
devServer: {
contentBase:'./dist',
watchContentBase:true
}
}
5.运行webpack过程中提示安装webpack-cli 安装后package.json
{
"name": "webpack-config",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --mode development",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.28.11",
"less": "^3.0.4",
"less-loader": "^4.1.0",
"node-less": "^1.0.0",
"style-loader": "^0.21.0",
"webpack": "^4.8.3",
"webpack-cli": "^2.1.3",
"webpack-dev-server": "^3.1.4"
},
"dependencies": {}
}
webpack4.0以上版本支持mode 配置以上scripts里面指定运行环境
6.自动刷新 用到webpack-dev-server,进行相关配置
7.安装 vue依赖相关 babel和vue系列
{
"name": "webpack-config",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --mode development",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-runtime": "^6.26.0",
"css-loader": "^0.28.11",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"less": "^3.0.4",
"less-loader": "^4.1.0",
"node-less": "^1.0.0",
"optimize-css-assets-webpack-plugin": "^4.0.1",
"style-loader": "^0.21.0",
"vue": "^2.5.16",
"vue-hot-reload-api": "^2.3.0",
"vue-html-loader": "^1.2.4",
"vue-loader": "^14.0.3",
"vue-style-loader": "^4.1.0",
"vue-template-compiler": "^2.5.16",
"webpack": "^4.8.3",
"webpack-cli": "^2.1.3",
"webpack-dev-server": "^3.1.4"
},
"dependencies": {}
}
8.生成html文件 用到插件html-webpack-plugin 进行相关配置
9.想要css分离和压缩 用到插件extract-text-webpack-plugin optimize-css-assets-webpack-plugin 进行相关配置 中途执行的时候有报错 根据报错提示一步步解决 搜索解决方案都能解决
10最后贴上webpack配置代码
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //生成html文件 并引入css js
const ExtractTextPlugin = require("extract-text-webpack-plugin"); //将css文件分开打包的插件
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin'); //压缩css文件 module.exports = {
entry:'./src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname,'dist') //解析到哪个目录
},
resolve:{
extensions: ['.js', '.vue', '.json'], //可以省略这些文件的扩展名
alias:{
'vue$':'vue/dist/vue.esm.js' //vue默认读取运行时文件 运行时编译,通过配置读取全文件,包括编译器和运行时编译
}
},
module: {
rules: [
{
test:/\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
less: ExtractTextPlugin.extract({ fallback: 'vue-style-loader', use: 'css-loader!less-loader' }),
css: ExtractTextPlugin.extract({ fallback: 'vue-style-loader', use: 'css-loader' })
}
}
},
{
test:/\.js$/,
use:[
{
loader: 'babel-loader'
}
]
},
{
test:/\.less$/,
use: ExtractTextPlugin.extract({//use:指需要什么样的loader去编译文件,这里由于源文件是.css所以选择css-loader
fallback: "style-loader",//fallback:编译后用什么loader来提取css文件
use: "less-loader!css-loader"//publicfile:用来覆盖项目路径,生成该css文件的文件路径
})
// use:[
// {
// loader:"style-loader"
// },
// {
// loader:"css-loader"
// },
// {
// loader:"less-loader"
// }
// ]
}
]
},
devServer: {
contentBase:'./dist',
watchContentBase:true
},
plugins: [
new HtmlWebpackPlugin({
template:'./index.html',
title:'index',
// filename:'index.html',
inject:true,
// chunks:['main']
hash:true //增加hash值 防止缓存
}),
new ExtractTextPlugin('css/index.css'), //指定css打包路径
new OptimizeCSSPlugin({ //压缩css
cssProcessorOptions: {
safe: true
}
})
]
}
代码量不大 但是自己从中学到了挺多东西,记录下来 后面dist文件都是build出来的
参考https://zhuanlan.zhihu.com/p/27663434 [译]使用Webpack提高Vue.js应用程序的4种方式
https://www.cnblogs.com/wonyun/p/6030090.html html-webpack-plugin详解
webpack工具学习 构建简单vue项目(不依赖vue-cli) webpack4.0的更多相关文章
- Ant—使用Ant构建简单Java项目(三)
博客<Ant-使用Ant构建简单Java项目(二)>我们简化了运行Test类中main方法须要运行的命令,本博客来介绍一下如何使build.xml文件和当中使用property标签定义的属 ...
- vue+webpack+VS Code入门简单的项目配置
为了方便,这边的编译器选择的是VS Code (Visual Studio Code); 打开VS Code,选择好自己的工作空间,然后新建一个文件夹作为我们项目的文件夹,然后,show time: ...
- 简单vue项目脚手架(vue+webpack2.0+vuex+vue-router)
github地址 使用技术栈 webpack(^2.6.1) webpack-dev-server(^2.4.5) vue(^2.3.3) vuex(^2.3.1) vue-router(^2.5.3 ...
- IntelliJ IDEA maven 构建简单springmvc项目
环境: apache-tomcat-8.5.15 jdk1.8.0_172 IDEA 建立一个maven-webapp项目:Create New Project 后点击next 然后next 可以选择 ...
- 前端单元测试,以及给现有的vue项目添加jest + Vue Test Utils的配置
文章原址:https://www.cnblogs.com/yalong/p/11714393.html 背景介绍: 以前写的公共组件,后来需要添加一些功能,添加了好几次,每次修改我都要测试好几遍保证以 ...
- 搭建vue项目并启动vue项目
链接地址:https://blog.csdn.net/aa792978017/article/details/82939483 Vue.js是现在比较优秀的Web前端框架,下面开始从零开始搭建一个Vu ...
- Vue项目二、vue环境搭建以及Vue-cli使用及详解
一.Vue多页面应用的环境搭建 每一次页面跳转的时候,后台服务器都会给返回一个新的html文档,这种类型的网站也就是多页网站,也叫做多页应用. 环境的搭建如下,在页面中引入如下框架 <scrip ...
- GitHub Vue项目推荐|Vue+Element实现的电商后台管理系统功能丰富
GitHub Vue项目推荐|mall-admin-web是一个电商后台管理系统的前端项目基于Vue+Element实现 主要包括商品管理.订单管理.会员管理.促销管理.运营管理.内容管理.统计报表. ...
- pycharm中新建Vue项目时没有vue.js的解决办法
可能很多小伙伴在使用pycharm 1,新建vue项目的时候并没有发现vue.js的名字, 2,新建.vue文件(即单文件组件)的时候没有 下面就来帮助大家一下,仅供参考 如图: 1.首先我们打开设置 ...
随机推荐
- noip8
T1 星际旅行 考试时觉得是道数学题,但没想到忘了欧拉路. 首先将每条边都拆成两条边,那么题目就变成了任意删掉两条边,使得新的图中存在欧拉路.设 \(sum\) 表示自环的数量, \(du_{i}\) ...
- 阿里云视频点播获取视频点播的video信息
背景 因为在项目中需要使用阿里云的视频点播服务,需要获取视频点播的时长信息. 工具类 生成签名串Signature SignatureUtils.java package com.meeno.wzq. ...
- Python打印图片
准备好图片:(我女票) python代码: # by gubin 6.20 from dyy from PIL import Image import sys import os def _main( ...
- Servlet的特点及运行过程
- Element form表单方法resetFields无效
之前遇到resetFields无效时都是自己手动用this.ruleForm = Object.assign({}, this.ruleForm, this.$options.data().ruleF ...
- 【WPF】 OxyPlot图表控件学习
最近在学习OxyPlot图表控件,一些基本的学习心得,在这里记录一下,方便以后进行查找. 一.引用 OxyPlot控件可以直接在VS的 " Nuget " 里面下载 选择: ...
- 每天迁移MySQL历史数据到历史库Python脚本
#!/usr/bin/env python # coding:utf-8 #__author__ = 'Logan' import MySQLdb import sys import dat ...
- 整理之Java容器
主要参考:JAVA常见容器 Set,List,Map,Vector,ArrayList的区别 Java所有容器见下图: 数组 int[] t = new int[10]; //声明并创建长度为10的数 ...
- JDBC简介及JDBC编写步骤及常见API
JDBC : Java Database Connectivity,Java数据库连接.SUN公司为了简化.统一对数据库的操作,定义了一套Java操作数据库的规范,称之为JDBC. JDBC就像一座桥 ...
- blender Text on Curve Text on Sphere
Text on Curve Shift + A 添加一个 BezierCurve Shift + A 添加一个 Text,Tab 编辑,再次 Tab 退回 Object Mode 选中 Text,Ad ...