webpack整体了解
一、下载
新建一个文件夹,在cmd中npm init->npm install->npm install webpack --save-dev
下载完成之后,新建一个webpack.config.js文件,在这个里面写配置
开始准备:http://www.cnblogs.com/GainLoss/p/7198953.html
webpack踩坑:http://www.cnblogs.com/GainLoss/p/7473585.html
vue+webpack:http://www.cnblogs.com/GainLoss/p/6592729.html
http://www.cnblogs.com/GainLoss/p/6927626.html
二、基础
1.一个入口一个出口
2.多个入口多个出口
3.将第三方文件单独成一个文件夹
4.css文件 js文件 图片 压缩
三、功能
1.基本 一个入口一个出口 将ES6转成ES5
var path=require('path');
var HtmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
entry:{
index:'index.js',
},
output:{
path:path.resolve(__dirname,'dist'),
filename:'[name].[hash].js',
},
resolve:{
extensions:['.js'],//js文件引入的时候可以不用加后缀
},
module:{
rules:[
{
test:/\.js$/,
exclude:/node_modules/,
loader:'babel-loader',
query:{
presets:['es2015']
}
},
]
},
plugins:[
new HtmlWebpackPlugin({
template:'./index.html'
}),
] }
2.将css转成单独的文件
在cmd中下载 npm install style-loader css-loader --save-dev
...module
{
test:/\.css$/,
exclude:/node_modules/,
loader:ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }), },
...plugin中
3.将代码中的图片转成base64
在 cmd中下载 npm install url-loader --save-dev
...module
{
test:/\.(png|jpg|gif)$/,
exclude:/node_modules/,
loader:'url-loader'
}
4.将第三方插件单独成文件
module.exports={
entry:{
index:'index.js',
vendor:['./web/jquery']
},
output:{
path:path.resolve(__dirname,'dist'),
filename:'[name].[hash].js',
},
resolve:{
extensions:['.js'],
},
module:{
rules:[
...
]
},
plugins:[
...new webpack.optimize.CommonsChunkPlugin({
name:['vendor','manifest']
}),
]
}
5.实现多个入口文件
...
function getfile(){//这里面需要获取全部符合的文件
var entry=[];
glob.sync(__dirname+'/web/*.js').forEach(function(file){
var name=file.split('main')[]
if(name){
var filename=file.split('main')[]+"main"+name;
entry.push(filename)
}
})
return entry
}
module.exports={
entry:{
index:getfile(),
vendor:['./web/jquery']
},
...
}
总的代码:
var path=require('path');
var HtmlWebpackPlugin=require('html-webpack-plugin')
var ExtractTextPlugin=require('extract-text-webpack-plugin')
var glob=require('glob')
var webpack=require('webpack')
var CleanWebpackplugin=require('clean-webpack-plugin') function getfile(){
var entry=[];
glob.sync(__dirname+'/web/*.js').forEach(function(file){
var name=file.split('main')[]
if(name){
var filename=file.split('main')[]+"main"+name;
entry.push(filename)
}
})
return entry
} module.exports={
entry:{
index:getfile(),
vendor:['./web/jquery']
},
output:{
path:path.resolve(__dirname,'dist'),
filename:'[name].[hash].js',
},
resolve:{
extensions:['.js'],
},
module:{
rules:[
{
test:/\.js$/,
exclude:/node_modules/,
loader:'babel-loader',
query:{
presets:['es2015']
}
},
{
test:/\.css$/,
exclude:/node_modules/,
loader:ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }),
},
{
test:/\.(png|jpg|gif)$/,
exclude:/node_modules/,
loader:'url-loader'
}
]
},
plugins:[
new HtmlWebpackPlugin({
template:'./index.html'
}),
new ExtractTextPlugin('style.css'),
new webpack.optimize.CommonsChunkPlugin({
name:['vendor','manifest']
}),
new CleanWebpackplugin(
['dist/index.*.js'],
{
root:__dirname,
verbose:true,
dry:true
}
),
] }
webpack整体了解的更多相关文章
- webpack整体配置结构
摘自<深入浅出webpack>2.8 const path = require('path'); module.exports = { // entry 表示入口,webpack执行的第一 ...
- 细说 webpack 之流程篇
摘自: http://taobaofed.org/blog/2016/09/09/webpack-flow/ 引言 目前,几乎所有业务的开发构建都会用到 webpack .的确,作为模块加载和打包神器 ...
- 细说webpack之流程篇
引言 目前,几乎所有业务的开发构建都会用到 webpack .的确,作为模块加载和打包神器,只需配置几个文件,加载各种 loader 就可以享受无痛流程化开发.但对于 webpack 这样一个复杂度较 ...
- webpack编译流程漫谈
前言 weback在web构建工具的激烈竞争中逐渐脱引而出. 无论是编译速度.报错提示.可扩展性等都给前端开发者耳目一新的感觉.本篇文章是个人对webpack的一点小研究总结. webpack在开发者 ...
- [转] webpack之plugin内部运行机制
简介 webpack作为当前最为流行的模块打包工具,几乎所有的主流前端开发框架(React.Vue等)都会将其作为默认的模块加载和打包工具.通过简单的配置项,使用各种相关的loader和plugin, ...
- Webpack Tapable原理详解
directory - src - sim ---- 简单的模拟实现 - /.js$/ ---- 使用 代码已上传github, 地址 Detailed Webpack 就像一条生产线, 要经过一系列 ...
- webpack介绍和使用
一webpack介绍1由来2介绍3作用4拓展说明5webpack整体认知二webpack安装1安装node2安装cnpm3安装nrm的两种方法4安装webpack三webpack配置0搭建项目结构1初 ...
- browserify学习总结
前言 在未接触browserify,虽然我知道它是一个前端构建工具,但还是有几个疑问: 1. browserify出现的日期? 2. 能构建哪些文件? 3. 附加的browserify代码体积是多大? ...
- happypack 原理解析
说起 happypack 可能很多同学还比较陌生,其实 happypack 是 webpack 的一个插件,目的是通过多进程模型,来加速代码构建,目前我们的线上服务器已经上线这个插件功能,并做了一定适 ...
随机推荐
- windows_study_2
描述:如何确定像%ProgramFiles%这样格式的目录的具体位置? 解决:运行——cmd——echo %ProgramFiles%——回车——界面就显示出目录位置了.
- delete ELK index
Go to tab “Dev Tools”4. On the left console type:GET _cat/indices?v&s=store.size:descand execute ...
- about rand and reflect
select regexp_replace(reflect("java.util.UUID", "randomUUID"), "-", &q ...
- Maven 错误 Failure to transfer ...was cached in the local repository...
Maven 错误 Failure to transfer ...was cached in the local repository... 我解决的时候多了两步才解决 1. mvn clean ins ...
- RestTemplate中几种常见的请求方式
GET请求 第一种:getForEntity getForEntity方法的返回值是一个ResponseEntity<T>,ResponseEntity<T>是Spring对H ...
- RTT学习之BSP
---恢复内容开始--- 一 根据相近型号的demo BSP进行修改制作自己的BSP https://github.com/RT-Thread/rt-thread/blob/master/bsp/st ...
- HDU - 6208 The Dominator of Strings HDU - 6208 AC自动机 || 后缀自动机
https://vjudge.net/problem/HDU-6208 首先可以知道最长那个串肯定是答案 然后,相当于用n - 1个模式串去匹配这个主串,看看有多少个能匹配. 普通kmp的话,每次都要 ...
- /proc/sys/net/ipv4/下各参数含义
net.ipv4.tcp_tw_reuse = 0 表示开启重用.允许将TIME-WAIT sockets重新用于新的TCP连接,默认为0,表示关闭 net.ipv4.tcp_tw_recycle = ...
- 性能测试工具LoadRunner04-LR之浏览器打不开
环境:win7+lr11 IE浏览器要在9以下,9以上lr11是调不起来的 火狐浏览器,我用的是28,最新版本的也调不起来 可以调起浏览器但没有事件? 1.把INTERNET高级设置中的“启用第三方浏 ...
- CSS选择器笔记,element element和element > element 的区别
看官方解释 element element 例子: div p 官方解释:div内部所有的p元素 就是说 只要p在div内部.如果 p在span内部,span在div内部,p也算在div内部 < ...