一、理解webpack

什么是webpack?

  是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起,打包后的文件用于在浏览器中使用,但它也能够胜任转换(transform)、打包(bundle)或包裹(package)任何资源(resource or asset)。"

二、前期准备

1.安装

  npm install --savd-dev webpack //下载

  npm init -y //初始化 下载package.json 保证node是最新的

  新建一个webpack.config.js文件,这里面放置的就是怎样实现打包的代码

2.我们可以更改运行webpack的命令

  在package.json中有个scripts中添加 "build":"webpack" 那么执行webpack的话 就可以用 npm run build

3.webpack中各个文件的作用

  package.json的作用是对webpack进行初始化

  webpack.config.js是对文件夹中的文件进行操作,里面都是需要对哪些文件进行什么样子的操作

以上基本的操作完成了

三、简单实现

module.exports={
entry:{//入口文件
index:'./index.js',
vendor:['./web/jquery']
},
output:{//出口文件
path:path.resolve(__dirname,'dist'),
filename:'[name].[hash].js',//设置一个带hash的文件
},
module:{
rules:[
{//es6转es5
test:/\.js$/,
exclude:/node_modules/,
loader:'babel-loader',
query:{
presets:['es2015']
}
},
]
},
//热更新
devServer: {
inline: true,
port: 8099
},
plugins:[
new webpack.HotModuleReplacementPlugin(),//热更新
]
}

我们可以看一下,最基本的就是需要

entry:入口文件;output:出口文件;module里面放的是下载的模块和对哪些文件进行操作;plugins是引入插件

四、在项目中需要实现的功能

1、将ES6转为ES5、sass/less转成css

  这种的话就是在module中的rules中执行特定的文件,并且使用对应的模块

2、多个入口多个出口

  多个入口,我们需要的是使用golb设置一个全部的文件;

  多个出口

path:path.resolve(__dirname,'dist'),
filename:'[name].[hash].js',//设置一个带hash的文件

3、将css文件单独打包、js文件单独打包、引入的第三方js文件单独打包、图片转为base64

(1)css单独打包成一个文件,我们需要用到一个插件:extract-text-webpack-plugin 然后再代码中这样:

module中rules

{//css
test:/\.css$/,
exclude:/node_modules/,
loader:ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }),
//loader:ExtractTextPlugin.extract('style-loader','css-loader!postcss-loader'), },

plugins

new ExtractTextPlugin('style.css'),//将css单独生成 

(2)第三方js文件(比如jquery)

入口文件

entry:{//入口文件
index:getfile(),
vendor:['./web/jquery']
},
// plugins中
new webpack.optimize.CommonsChunkPlugin({//第三方插件
name:['vendor','manifest']
}),

4、热更新

热更新的意思是,当我们修改代码的时候,保存文件之后,webpack自动进行打包

在module.export中添加

//热更新
devServer: {
inline: true,
port: 8099
},

plugins

new webpack.HotModuleReplacementPlugin(),//热更新

代码:https://github.com/GainLoss/My-Webpack.git

=============================================

注意:

(1)在执行webpack-dev-server --open的时候,出现找不到webpack-dev-server

解决就是安装的时候用npm install webpack-dev-server -g这个命令安装 参考https://stackoverflow.com/questions/31611527/webpack-webpack-dev-server-command-not-found

要打开webpack-dev-server的时候命令必须是webpack-dev-server --open

(2)理解一下module中rules和plugins的区别:

module中rules是在打包构建过程中处理源文件,一次处理一个;

plugins是对整个构建过程进行处理

webpack了解的更多相关文章

  1. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. webpack之傻瓜式教程

    接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpack教程满天飞,但是却很难找到一个能让新人快 ...

  3. 细说前端自动化打包工具--webpack

    背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...

  4. Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程(柱状图,南丁格尔图)

    Webstorm+Webpack+echarts   ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...

  5. 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert

    使用webstorm+webpack构建简单入门级"HelloWorld"的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这 ...

  6. webpack入门教程之Hello webpack(一)

    webpack入门教程系列为官网Tutorials的个人译文,旨在给予想要学习webpack的小伙伴一个另外的途径.如有不当之处,请大家指出. 看完入门教程系列后,你将会学习到如下内容: 1.如何安装 ...

  7. webpack的使用

    1.webpack是什么? 打包前端项目的工具(为项目提高逼格的东西). 2.webpack的基本命令 webpack#最基本的启动webpack命令 webpack-w #提供watch方法,实时进 ...

  8. Webpack 配置摘要

    open-browser-webpack-plugin 自动打开浏览器 html-webpack-plugin 通过 JS 生成 HTML webpack.optimize.UglifyJsPlugi ...

  9. Vue + Webpack + Vue-loader 系列教程(2)相关配置篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...

  10. Vue + Webpack + Vue-loader 系列教程(1)功能介绍篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...

随机推荐

  1. sharepoint_study_9

    描述:sharepoint2013 网站修改导航条标题 SuiteBartext 图示: 解决: 管理员身份进sharepoint powershell ,依次敲入搞定1. $app = Get-SP ...

  2. POJ3469Dual Core CPU

    题意:给你n个模块,每个模块在A核花费为ai,在B核跑花费为bi,然后由m个任务(ai,bi,wi),表示如果ai,bi不在同一个核上跑,额外的花费为wi,求最小的花费. 分析: 用最小的费用将对象划 ...

  3. 15-----BBS论坛

    BBS论坛(十五) 15.1.登录界面完成 (1)front/signbase.html {% from 'common/_macros.html' import static %} <!DOC ...

  4. java——Class、动态加载

    Class和Object混淆了? Object: 任何类都是Object类的子类 Class: 任何类都是Class的实例对象 Class可以说是一种特殊的类,它表示的是类类型,Object仍然是Cl ...

  5. Linux环境编程--waitpid与fork与execlp

    waitpid waitpid(等待子进程中断或结束) 表头文件 #include<sys/types.h> #include<sys/wait.h> 定义函数 pid_t w ...

  6. c++关于map的find和count的使用

    编程的时候比较常用,今天记录一下,以后备用. 使用count,返回的是被查找元素的个数.如果有,返回1:否则,返回0.注意,map中不存在相同元素,所以返回值只能是1或0. 使用find,返回的是被查 ...

  7. vue学习笔记 vue安装

    一.安装步骤:(用cmd命令用管理身份安装比较顺利) 1.安装node,安装后可以输入npm -v 查看版本,升级npm可用 cnpm install npm -g 2.安装vue 输入cnpm in ...

  8. Python常用模块一

    一. os模块 os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("dirname") 改变当前脚本工作目录:相当于shell下cd ...

  9. Linux 命令-1

    1.除了/之外,所有的字符都合法,有些字符最好不要用 2.以.开头的文件将被隐藏.和window的区别 3.大小写敏感 4.命令格式: 命令 -选项 参数   例如: ls -la /etc  ,选项 ...

  10. StreamWrite类

    FileStream类,该对象只能以字节形式读取/写入数据,这就使得操作非常困难. 一般有了FileStream对象,都会借用StreamWrite对象或StreamReader对象的方法来处理文件. ...