目的用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的更多相关文章

  1. Ant—使用Ant构建简单Java项目(三)

    博客<Ant-使用Ant构建简单Java项目(二)>我们简化了运行Test类中main方法须要运行的命令,本博客来介绍一下如何使build.xml文件和当中使用property标签定义的属 ...

  2. vue+webpack+VS Code入门简单的项目配置

    为了方便,这边的编译器选择的是VS Code (Visual Studio Code); 打开VS Code,选择好自己的工作空间,然后新建一个文件夹作为我们项目的文件夹,然后,show time: ...

  3. 简单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 ...

  4. IntelliJ IDEA maven 构建简单springmvc项目

    环境: apache-tomcat-8.5.15 jdk1.8.0_172 IDEA 建立一个maven-webapp项目:Create New Project 后点击next 然后next 可以选择 ...

  5. 前端单元测试,以及给现有的vue项目添加jest + Vue Test Utils的配置

    文章原址:https://www.cnblogs.com/yalong/p/11714393.html 背景介绍: 以前写的公共组件,后来需要添加一些功能,添加了好几次,每次修改我都要测试好几遍保证以 ...

  6. 搭建vue项目并启动vue项目

    链接地址:https://blog.csdn.net/aa792978017/article/details/82939483 Vue.js是现在比较优秀的Web前端框架,下面开始从零开始搭建一个Vu ...

  7. Vue项目二、vue环境搭建以及Vue-cli使用及详解

    一.Vue多页面应用的环境搭建 每一次页面跳转的时候,后台服务器都会给返回一个新的html文档,这种类型的网站也就是多页网站,也叫做多页应用. 环境的搭建如下,在页面中引入如下框架 <scrip ...

  8. GitHub Vue项目推荐|Vue+Element实现的电商后台管理系统功能丰富

    GitHub Vue项目推荐|mall-admin-web是一个电商后台管理系统的前端项目基于Vue+Element实现 主要包括商品管理.订单管理.会员管理.促销管理.运营管理.内容管理.统计报表. ...

  9. pycharm中新建Vue项目时没有vue.js的解决办法

    可能很多小伙伴在使用pycharm 1,新建vue项目的时候并没有发现vue.js的名字, 2,新建.vue文件(即单文件组件)的时候没有 下面就来帮助大家一下,仅供参考 如图: 1.首先我们打开设置 ...

随机推荐

  1. noip8

    T1 星际旅行 考试时觉得是道数学题,但没想到忘了欧拉路. 首先将每条边都拆成两条边,那么题目就变成了任意删掉两条边,使得新的图中存在欧拉路.设 \(sum\) 表示自环的数量, \(du_{i}\) ...

  2. 阿里云视频点播获取视频点播的video信息

    背景 因为在项目中需要使用阿里云的视频点播服务,需要获取视频点播的时长信息. 工具类 生成签名串Signature SignatureUtils.java package com.meeno.wzq. ...

  3. Python打印图片

    准备好图片:(我女票) python代码: # by gubin 6.20 from dyy from PIL import Image import sys import os def _main( ...

  4. Servlet的特点及运行过程

  5. Element form表单方法resetFields无效

    之前遇到resetFields无效时都是自己手动用this.ruleForm = Object.assign({}, this.ruleForm, this.$options.data().ruleF ...

  6. 【WPF】 OxyPlot图表控件学习

    最近在学习OxyPlot图表控件,一些基本的学习心得,在这里记录一下,方便以后进行查找.   一.引用 OxyPlot控件可以直接在VS的 " Nuget " 里面下载   选择: ...

  7. 每天迁移MySQL历史数据到历史库Python脚本

    #!/usr/bin/env python # coding:utf-8 #__author__ = 'Logan'      import MySQLdb import sys import dat ...

  8. 整理之Java容器

    主要参考:JAVA常见容器 Set,List,Map,Vector,ArrayList的区别 Java所有容器见下图: 数组 int[] t = new int[10]; //声明并创建长度为10的数 ...

  9. JDBC简介及JDBC编写步骤及常见API

    JDBC : Java Database Connectivity,Java数据库连接.SUN公司为了简化.统一对数据库的操作,定义了一套Java操作数据库的规范,称之为JDBC. JDBC就像一座桥 ...

  10. blender Text on Curve Text on Sphere

    Text on Curve Shift + A 添加一个 BezierCurve Shift + A 添加一个 Text,Tab 编辑,再次 Tab 退回 Object Mode 选中 Text,Ad ...