webpack4 打包
1. 基本安装及命令
npm config set registry https://registry.npm.taobao.org // 淘宝镜像
npm install webpack-cli -g // 安装之后才能 webpack -v
webpack index.js -o out.js // 打包指定文件 指定输出路径及名称
webpack --mode development index.js -o out.js // 指定打包方式为开发模式(默认为产品模式:去除console命令及其他未引用代码)
( src - dist 4.0版本默认不需配置《代码资源放置在src,生成的代码资源放置在dist 》,但也可以增加配置文件 webpack.config.js )
常用的 webpack.config.js
var path = require('path'); module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'out')
}
};
webpack --mode development // 只用 webpack,则默认为 production 模式,去除多余部分及调试提示
2. 合并打包
var path = require('path'); module.exports = {
entry: ['./src/a.js','./src/b.js','./src/c.js'],
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'out')
}
};
3. 分块打包
var path = require('path'); module.exports = {
entry: {
a:'./src/a.js',
b:'./src/b.js',
c:'./src/c.js'
},
output: {
filename: '[name].build.js',
path: path.resolve(__dirname, 'out')
}
};
4. 配置属性为开发模式 mode: development
5.url-loader 处理小图片
npm init
npm install url-loader --save
npm install file-loader --save // 图片尺寸超过限制时使用
var path = require('path'); module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
publicPath: './out/', // 最后的 / 不可少,两个 out 对应,确保 生成的大文件图片路径正确
path: path.resolve(__dirname, 'out')
},
mode:'production',
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
]
}
};
6. 引入 jquery expose-loader
npm install expose-loader --save-dev
npm install jquery --save
var path = require('path'); module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
publicPath: './out/', // 最后的 / 不可少,两个 out 对应,确保 生成的大文件图片路径正确
path: path.resolve(__dirname, 'out')
},
mode:'production',
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
},
{
test: require.resolve('jquery'),
loader: 'expose-loader?jQuery!expose-loader?$!expose-loader?scrollable'
}
]
}
};
使用 import $ from 'expose-loader?$!jquery';
相关链接:
webpack:使用expose-loader 解决第三方库的插件依赖问题
webpack4 打包的更多相关文章
- webpack4打包nodejs项目进阶版——多页应用模板
前段时间我写了个打包nodejs项目的文章,点击前往 但是,问题很多.因为之前的项目是个历史遗留项目,重构起来可能会爆炸,当时又比较急所以就写个的适用范围很小的webpack的打包方法. 最近稍微得空 ...
- webpack4 打包静态资源
demo 代码点此,开始之前,先做点准备工作. 准备工作 准备一个空文件夹,然后执行下列命令: npm init -y npm i -D webpack webpack-cli 然后创建一个 dist ...
- webpack4打包报错ERROR in multi ./src/main.js dist/bundle.js
webpack打包测试: 上边将mode01.js模块及main.js主文件编写完成,下边使用webpack对这些js文件进行打包 1.进入程序目录,执行webpack main.js build.j ...
- webpack4 打包优化
1 参考文章 彻底解决 webpack 打包文件体积过大 webpack4提升180%编译速度 详解webpack4之splitchunksPlugin代码包分拆 webpack v4 中的断舍离 开 ...
- webpack4 打包 library 遇到的坑
output: { publicPath: '/', path: path.join(__dirname, 'lib'), filename: 'chart.js', library: 'tchart ...
- 详解webpack4打包--新手入门(填坑)
注意,这个dev和build好像在哪儿见过??对了, 刚刚才在package.json里配置的“scripts”这一项的值就有“dev”和“build”.对,一点都不错,就是这2个值,这2个值代表的是 ...
- webpack4 打包报错 :regeneratorRuntime is not defined
使用async函数,在webpack打包时报错 babel-polyfill is required. You must also install it in order to get async/a ...
- webpack4打包报错:WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults fo
运行命令webpack ./src/main.js ./dist/murenziwei.js后,目录上神马动静都没有,你以为在dist文件夹上会有murenziwei.js吗?毛都没有 警告和错误倒是 ...
- webpack4——打包html报错解决
①先引入html-webpack-plugin插件,然后在终端下载 npm install --save-dev html-webpack-plugin ②我的文件结构 ③修改webpack.dev. ...
随机推荐
- js 里面call()的使用
call 是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向.JavaScript 的一大特点是,函数存在「定义时上下文」和「运行时上下文」 ...
- js常用遍历汇总
1, for(let i of Array) for( let i of arr){ console.log(i); } ES6新增的,i代表每次循环Array的值,相当于Array[0]到Array ...
- Struts模型驱动
Struts运行时候,会执行默认的拦截器栈,其中有一个拦截器,模型驱动拦截器: <interceptor name="modelDriven" class="com ...
- Cookie类
Cookie类:用于存储会话数据 1)构造Cookie对象 Cookie(java.lang.String name, java.lang.String value) 2)设置cookie void ...
- JQUERY的$(function(){})和window.onload=function(){}的区别
在Jquery里面,我们知道入口函数有两种写法:$(function(){}) 和$(document).ready(function(){}) 作用类似于传统JavaScript中的window.o ...
- Python学习笔记:Unittest框架了解
Unittest单元测试框架不仅可以适用于单元测试,还可以适用于自动化测试用来的开发与执行,该测试框架可执行测试用例,并提供丰富的断言方法,最终生成测试报告. 一.Unittest常用方法 1.Tes ...
- Jmeter如何使用数据库返回值实践
Jmeter如何使用数据库返回值实践 最近使用Jmeter针对产品做性能测试,测试内容是要模拟300并发用户审批休假申请时的性能.由于每个申请人的主管不同,且会根据不同的休假类型,会有一级审批或者二级 ...
- java:WebService
1.WebService就是应用之间的远程调用,可以跨语言调用,为甚么可以跨语言调用,是因为其实依赖与xml语言,xml语言依赖http协议,http协议底层也是socket.
- 基于OpenCV的循环行、列移动函数circShift()
///*12 在Matlab中有个circShift()函数,可以实现行.列的循环移动 /// 在返卷积运算中,会用到这个函数.所以,在Opencv中我也定义同样 /// 功能的函数 /// 该函数有 ...
- 51CTO下载-html+javascript+css学习宝典
一.html知识 1. meta标签 Meta: 提供网页信息,搜索引擎使用 <meta name=“aa” content=“bbb”> <meta http-equiv=“exp ...