浅析webpack使用方法
webpack是一个网页模块打包工具,可以将所有代码、图片、样式打包在一起,除此之外还有许多实用的功能。最近看了一个慕课学习了一下webpack的使用,在这里做一下总结。
本文不会涉及太多深入的知识,只会讲主要的几个知识点。
安装
npm init myapp
cd myapp
npm i webpack
此时项目内已经有了node_modulese
和package.json
使用
这里将使用一个Vue和webpack结合的项目来讲解。
新建文件夹如下
webpack的主要使用方法我都在注释里写的很清楚了。
webpack.config.js
const path = require('path') //必须先导入这个包,用于管理路径
const webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HTMLPlugin = require('html-webpack-plugin');
const isDev = process.env.NODE_ENV === 'development'
const config = {
target: 'web',
entry: path.join(__dirname, 'src/index.js'), //配置入口文件路径,这里的__dirname为系统变量,表示项目根目录
output: { //配置build文件输出路径
filename: 'bundle.js',
path: path.join(__dirname, 'dist')
},
module: {
rules: [ //添加各个类型的loader,是一个数组
{
test: /\.vue$/, //采用正则来匹配文件类型
loader: require.resolve('vue-loader'), //选择loader,一般名字都是filetype-loader,需要先用npm i 安装对应的loader
options: {
}
}, {
test: /\.css$/,
use: [ //使用多个loader时使用use语句,按照从后往前的解析顺序写,这里是先使用css-loader,再使用style-loader
'style-loader',
'css-loader'
]
}, {
test: /\.(gif|jpg|jpeg|png|svg)$/,
use: [
{
loader: 'url-loader',
options: { //使用options往loader里面传额外的参数
limit: 1024,
name: '[name]-aaa.[ext]'
}
}
]
}, {
test: /\.styl$/,
use: [
'style-loader',
'css-loader',
'stylus-loader'
]
}
]
},
plugins: [ //在这里添加各种插件,这里的插件都需要先在前面require
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: isDev ? '"development"' : '"production"'
}
}),
new HTMLPlugin(),
new VueLoaderPlugin()
]
}
if (isDev) { //判断是否是在开发环境下进行配置
config.devtool = '#cheap-module-eval-source-map' //调试器,不然按F12只有一个打包后的代码不利于调试
config.devServer = {
port: '8000', //设置端口
host: '0.0.0.0', //设置ip,推荐设置0.0.0.0而不是localhost,这样的话就可以在网页上既可以用localhost登录也可以在内网手机输入ip登入
overlay: {
errors: true, //有错误时是否将错误在网页显示
},
open: true, //编译完成自动用浏览器打开
historyApiFallback: true, //将一些错误地址或者没有定义的地址跳转,类似于Not Found 404
// hot: true //打开局部热加载,因为后面使用了实时更新的功能,所以关闭热加载
}
config.plugins.push(
new webpack.HotModuleReplacementPlugin(), //启动热加载功能需要添加的插件
new webpack.NoEmitOnErrorsPlugin() //减少一些不必要的调试信息展示问题
)
}
module.exports = config;
对应的需要在package.json
中的scripts
里面添加以下代码来指定
"scripts": {
...
"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
"dev": "cross-env NODE_ENV=development· webpack-dev-server --config webpack.config.js"
},
浅析webpack使用方法的更多相关文章
- create-react-app脚手架中配置webpack的方法
概述 create-react-app脚手架中的react-scripts能够(1)帮我们自动下载需要的webpack依赖:(2)自己写了一个nodejs服务端脚本代码:(3)使用express的Ht ...
- 常用的webpack优化方法
1. 前言 关于webpack,相信现在的前端开发人员一定不会陌生,因为它已经成为前端开发人员必不可少的一项技能,它的官方介绍如下: webpack 是一个模块打包器.webpack的主要目标是将 J ...
- webpack系列--浅析webpack的原理
一.前言 现在随着前端开发的复杂度和规模越来越大,鹰不能抛开工程化来独立开发,比如:react的jsx代码必须编译后才能在浏览器中使用,比如sass和less代码浏览器是不支持的.如果摒弃这些开发框架 ...
- IOS设计模式浅析之工厂方法模式(Factory Method)
概述 在软件系统中,经常面临着“某个对象”的创建工作,由于需求的变化,这个对象的具体实现经常面临着剧烈的变化,但是它却拥有比较稳定的接口. 如何隔离出这个易变对象的变化,使得系统中“其它依赖该对象的对 ...
- webpack 模块方法
1. webpack的import和export不需要引入babel 其他ES6语法需要引入babel 2. import引入export导出的模块 3. import()模块分离 低版本浏览器想使 ...
- 浅析webpack打包输出内容
当我们执行npm run bundle的时候输出了很多信息,那么这些信息都是什么意思呢 Hash: 221e7fd2e8bf82149df7 Version: webpack 4.30.0 Time: ...
- 浅析HashSet add() 方法存储自定义类型对象的过程
一.自定义一个Student类 package date0504; public class Student { private String id; Student(String id){ this ...
- 浅析String.intern()方法
1.String类型“==”比较样例代码如下:package com.luna.test;public class StringTest { public static void main(Strin ...
- 浅析Java hashCode()方法
散列码(hash code)是由对象导出的一个整数值. 散列码没有规律,两个不同的对象x和y,x.hashCode()与y.hashCode()基本上不会相同. public static voi ...
随机推荐
- jenkins+git+maven 增量部署思路以及相关脚本
之前通过jenkins+Git+maven这种方式打war包然后scp到测试环境使用,但是现在项目组要求打增量包,即只部署修改的文件和配置文件. 核心问题:如何获取到变动的文件??? 前置条件:初始化 ...
- spring cloud 路由网关zuul基本使用
在微服务架构中,需要几个关键的组件,服务注册与发现.服务消费.负载均衡.断路器.智能路由.配置管理等,由这几个组件可以组建一个简单的微服务架构.客户端的请求首先经过负载均衡(zuul.Ngnix),再 ...
- springboot+mybatis+springMVC基础框架搭建
项目结构概览 pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http: ...
- SqlServerHelp
using System; using System.Collections.Generic; using System.Reflection; using System.Text; using Sy ...
- 用Photoshop扭曲滤镜工具打造旋转的光束效果
原文:https://www.w3cschool.cn/photoshopgjjc/dthfn1.html 教程与已往的不同,作者加上了一些新的步骤如锐化等,出来的效果也有所改进.大致过程:先用滤镜制 ...
- 一键安装基于dns的高可用k8s集群(3节点,etcd https)
在公司,使用dns切换,可能会比keepalived+haproxy,更精简的易维护. 毕竟,高可用只是偶尔切换,不是时时切换. 且dns解析在自己可控时,更不会影响k8s线上使用了. (部分代码,由 ...
- springboot调用http方式
1.httpclient 2.okhttp 3.feign 安装Gradle包 compile 'org.springframework.cloud:spring-cloud-starter-open ...
- NetCore 生成RSA公私钥对,公钥加密私钥解密,私钥加密公钥解密
using Newtonsoft.Json; using Org.BouncyCastle.Crypto; using Org.BouncyCastle.Crypto.Encodings; using ...
- Elasticsearch和HDFS 容错机制 备忘
1.Elasticsearch 横向扩容以及容错机制http://www.bubuko.com/infodetail-2499254.html 2.HDFS容错机制详解https://www.cnbl ...
- delphi TreeView 从数据库添加节点的四种方法
方法一:delphi中递归算法构建treeView 过程:通过读取数据库中table1的数据,来构建一颗树.table1有两个字段:ID,preID,即当前结点标志和父结点标志.所以整个树的表示为父母 ...