webpack4基本配置
console.log(123);
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development", // （开发模式）
"build": "webpack --mode production" // （生产模式）
},
开发模式生成的文件不压缩
生产模式生成的文件压缩
const path = require("path")
module.exports = {
entry: "./src/index.js", // 入口
output: { // 出口
filename: "bundle.js", // 生成打包文件的名字
path: path.join(__dirname, "dist") // 打包文件的路径，__dirname指当前根目录
}
}
此时运行npm run dev，在dist文件夹下就能看到打包生成的bundle.js文件
module.exports = {
entry: { // 多文件入口
index: "./src/index.js",
test: "./src/test.js"
},
output: { // 出口
filename: "[name].bundle.js", // 生成打包文件的名字 ==>注意这里，因为是多文件入口，所有需要[name]来区分文件
path: path.join(__dirname, "dist") // 打包文件的路径，__dirname指当前根目录
}
}
运行npm run dev
devServer: {
// 设置基本目录结构
contentBase: path.join(__dirname, "dist"),
// 服务器的ip地址，也可以使用localhost
host: "localhost",
// 服务端压缩是否开启
compress: true,
// 配置服务端口号
port: 8080
}
修改package.json内容为
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"serve": "webpack-dev-server --mode development",
"dev": "webpack --mode development",
"build": "webpack --mode production"
},
运行npm run serve
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="main">
hello
</div>
</body>
</html>
在webpack.config.js中进行配置
开头引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
在plugins配置
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/inde.html',
// chunks: ['index'], // 多入口时需要用到
hash: true // 插入的文件后面加一段随机数
})
],
运行npm run serve，浏览器中打开localhost:8080
#main{
height: 100px;
width: 100px;
font-size: 40px;
color: #FF6347;
background-color: pink;
}
需要安装css-loader，style-loader
module: {
rules:[
// css loader
{
test: /\.css$/,
use: ["style-loader", "css-loader"] // 这里顺序不能颠倒
}
]
},
new ExtractTextPlugin({
filename: "index.css",
})
rules:[
// css loader
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
}) }
]
.bg{
height: 50px;
width: 50px;
background: url("./img/confirm.png")
}
// 图片 loader
{
test: /\.(png|jpg|gif|jpeg)/,
use: [{
loader: 'url-loader',
options: {
limit: 500 //是把小于500B的文件打成Base64的格式，写入JS
}
}]
}
options: {
limit: 500, //是把小于500B的文件打成Base64的格式，写入JS
outputPath: 'images/' //打包后的图片放到images文件夹下
}
{
test: /\.(htm|html)$/i,
use: ["html-withimg-loader"]
}
// less loader
{
test: /\.less$/,
use: ["style-loader", "css-loader", "less-loader"]
}
@bgColor: #FFA54F;
.my{
height: 100px;
width: 100px;
background-color: @bgColor;
}
// less loader
{
test: /\.less$/, use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader", "less-loader"]
}), }
module.exports = {
plugins: [
require('autoprefixer') //自动添加前缀插件
]
}
// css loader
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader", "postcss-loader"]
}) },
webpack4基本配置的更多相关文章
- webpack4.x配置详解，多页面，多入口，多出口，新特性新坑！！
花了差不多一天多的时间,重新撸了一遍webpack4.x的常用配置. 基本上常用的配置都熟悉了一遍,总体上来讲,为了对parcel进行反击,webpack从4.x开始,正在朝着尽可能的简化配置文件的方 ...
- webpack4入门配置
下面是抄过来的,方便自己翻越 webpack4.x入门配置 1.首先npm install webpack webpack-cli webpack-dev-server -g (mac电脑用超级管 ...
- es6 装饰器decorator的使用 +webpack4.0配置
decorator 装饰器 许多面向对象都有decorator(装饰器)函数,比如python中也可以用decorator函数来强化代码,decorator相当于一个高阶函数,接收一个函数,返回一个被 ...
- Webpack4 splitChunks配置，代码分离逻辑
博客不知道啥时候写的了,一直在草稿箱没写完,突然感觉今年过去大半了,又没怎么写博客.写写完,有始有终 1.代码分离升级 原来项目代码分离是通过下面的配置,基于bundle-loader插件,通过rou ...
- webpack4 入门配置研究
1. 全局安装 npm install webpack webpack-cli webpack-dev-server -g 1.1)输密文的密码(电脑开机) 1.2)安装成功 2. 输入命令mkdir ...
- webpack4进阶配置
移动端CSS px自动转换成rem 需要两步来实现: px2rem-loader 在构建阶段将px转换成rem lib-flexible 页面渲染时动态计算根元素的font-size值(手机淘宝开源库 ...
- webpack4的配置你都掌握了么？
webpack5都出了,webpack4的的基本配置,解析ES6,引入CSS,编译Less,设置image等等,你都会了么? 解析ES6 了解Babel Babel是一个JavaScript编译器, ...
- webpack4.x配置详情
webpack打包工具现在非常流行,熟悉并且能够进行配置也变得非常重要.在学习和使用的过程中遇到过很多的问题,希望能够让自己记录下来,巩固自己的学习. 1.创建文件目录 先在自己的常用盘中(我自己的项 ...
- vue项目的webpack4.X配置
这两天摆弄webpack,躺过很多坑,直到今天看了一位博主的文章才得以解决.他对配置中的各个部分做说明. 下面的配置99.9%抄自博主: https://www.cnblogs.com/nianyif ...
随机推荐
- 四、Oracle loop循环、while循环、for循环、if选择和case选择、更改读取数据、游标、触发器、存储过程
数据库的设计(DataBase Design): 针对于用户特定的需求,然后我们创建出来一个最使用而且性能高的数据库! 数据库设计的步骤: 01.需求分析 02.概念结构设计 03.逻辑结构设计 04 ...
- 单元测试模拟request后台
编写测试单元 @RunWith(SpringJUnit4ClassRunner.class) 让测试运行于Spring测试环境 @WebAppConfiguration是一个类级别的注释,用于声明Ap ...
- 基于springmvc开发注解式ip拦截器
一.注解类 @Documented @Target({ElementType.TYPE,ElementType.METHOD}) @Retention(RetentionPolicy.RUNTIME) ...
- PHP迭代器 Iterator
Iterator是PHP自带的迭代器接口. 实现该接口的类必须实现该接口的方法,以便能够使用foreach进行输出迭代后的数据. interface Iterator extends Traversa ...
- svg保存为图片下载到本地
今天给大家说一个将svg下载到本地图片的方法,这里我不得不吐槽一下,为啥博客园不可以直接上传本地文件给大家用来直接下载分享呢,好,吐槽到此为止! 这里需要用到一个js文件,名字自己起,内容如下: (f ...
- 【ArcGIS】文件地理数据库，个人地理数据库与ArcSDE的局别
地理数据库的类型 地理数据库是用于保存数据集集合的“容器”.有以下三种类型: 文件地理数据库 - 在文件系统中以文件夹形式存储.每个数据集都以文件形式保存,该文件大小最多可扩展至 1 TB.建议使 ...
- HTML5 笔记之 HTML5 的常见用法介绍
阅读目录 介绍 网页标题.文章标题.文章段落 介绍 字体大小.字体颜色.字体类型.字体位置.背景颜色 介绍 插入图片 介绍 网页内的超链接.网页间的超链接 介绍 有序列表.无序列表 介绍 表格制作 介 ...
- Eclipse+ADT+Android SDK 搭建安卓开发环境（转）
要求 必备知识 windows 7 基本操作. 运行环境 windows 7(64位); eclipse-jee-luna-SR2-win32(32位);ADT-23.0.4 下载地址 环境下载 最近 ...
- 再谈 Struts1.x 的运行机制
1.Action类 execute 方法 ActionMapping 对应 <action path="user" type="myuser.UserAction& ...
- SAP ECC6.0-中建信息版
平台: SUSE Enterprise Server 类型: 虚拟机镜像 软件包: sap ecc 6.0 ehp7 sps10 commercial erp sap 服务优惠价: 按服务商许可协议 ...