一、下载

新建一个文件夹,在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中
 new ExtractTextPlugin('style.css'),
 

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整体了解的更多相关文章

  1. webpack整体配置结构

    摘自<深入浅出webpack>2.8 const path = require('path'); module.exports = { // entry 表示入口,webpack执行的第一 ...

  2. 细说 webpack 之流程篇

    摘自: http://taobaofed.org/blog/2016/09/09/webpack-flow/ 引言 目前,几乎所有业务的开发构建都会用到 webpack .的确,作为模块加载和打包神器 ...

  3. 细说webpack之流程篇

    引言 目前,几乎所有业务的开发构建都会用到 webpack .的确,作为模块加载和打包神器,只需配置几个文件,加载各种 loader 就可以享受无痛流程化开发.但对于 webpack 这样一个复杂度较 ...

  4. webpack编译流程漫谈

    前言 weback在web构建工具的激烈竞争中逐渐脱引而出. 无论是编译速度.报错提示.可扩展性等都给前端开发者耳目一新的感觉.本篇文章是个人对webpack的一点小研究总结. webpack在开发者 ...

  5. [转] webpack之plugin内部运行机制

    简介 webpack作为当前最为流行的模块打包工具,几乎所有的主流前端开发框架(React.Vue等)都会将其作为默认的模块加载和打包工具.通过简单的配置项,使用各种相关的loader和plugin, ...

  6. Webpack Tapable原理详解

    directory - src - sim ---- 简单的模拟实现 - /.js$/ ---- 使用 代码已上传github, 地址 Detailed Webpack 就像一条生产线, 要经过一系列 ...

  7. webpack介绍和使用

    一webpack介绍1由来2介绍3作用4拓展说明5webpack整体认知二webpack安装1安装node2安装cnpm3安装nrm的两种方法4安装webpack三webpack配置0搭建项目结构1初 ...

  8. browserify学习总结

    前言 在未接触browserify,虽然我知道它是一个前端构建工具,但还是有几个疑问: 1. browserify出现的日期? 2. 能构建哪些文件? 3. 附加的browserify代码体积是多大? ...

  9. happypack 原理解析

    说起 happypack 可能很多同学还比较陌生,其实 happypack 是 webpack 的一个插件,目的是通过多进程模型,来加速代码构建,目前我们的线上服务器已经上线这个插件功能,并做了一定适 ...

随机推荐

  1. windows_study_2

    描述:如何确定像%ProgramFiles%这样格式的目录的具体位置? 解决:运行——cmd——echo %ProgramFiles%——回车——界面就显示出目录位置了.

  2. delete ELK index

    Go to tab “Dev Tools”4. On the left console type:GET _cat/indices?v&s=store.size:descand execute ...

  3. about rand and reflect

    select regexp_replace(reflect("java.util.UUID", "randomUUID"), "-", &q ...

  4. Maven 错误 Failure to transfer ...was cached in the local repository...

    Maven 错误 Failure to transfer ...was cached in the local repository... 我解决的时候多了两步才解决 1. mvn clean ins ...

  5. RestTemplate中几种常见的请求方式

    GET请求 第一种:getForEntity getForEntity方法的返回值是一个ResponseEntity<T>,ResponseEntity<T>是Spring对H ...

  6. RTT学习之BSP

    ---恢复内容开始--- 一 根据相近型号的demo BSP进行修改制作自己的BSP https://github.com/RT-Thread/rt-thread/blob/master/bsp/st ...

  7. HDU - 6208 The Dominator of Strings HDU - 6208 AC自动机 || 后缀自动机

    https://vjudge.net/problem/HDU-6208 首先可以知道最长那个串肯定是答案 然后,相当于用n - 1个模式串去匹配这个主串,看看有多少个能匹配. 普通kmp的话,每次都要 ...

  8. /proc/sys/net/ipv4/下各参数含义

    net.ipv4.tcp_tw_reuse = 0 表示开启重用.允许将TIME-WAIT sockets重新用于新的TCP连接,默认为0,表示关闭 net.ipv4.tcp_tw_recycle = ...

  9. 性能测试工具LoadRunner04-LR之浏览器打不开

    环境:win7+lr11 IE浏览器要在9以下,9以上lr11是调不起来的 火狐浏览器,我用的是28,最新版本的也调不起来 可以调起浏览器但没有事件? 1.把INTERNET高级设置中的“启用第三方浏 ...

  10. CSS选择器笔记,element element和element > element 的区别

    看官方解释 element element  例子: div p 官方解释:div内部所有的p元素 就是说 只要p在div内部.如果 p在span内部,span在div内部,p也算在div内部 < ...