https://www.jianshu.com/p/42e11515c10f
https://www.cnblogs.com/fps2tao/p/10879910.html
webpack它是现代JavaScript应用程序的静态模块打包器（module bundler），有入口、出口，loader（加载器）和插件（plugins）。
当webpack处理应用程序时，它会递归的构建一个依赖关系图，其中包含应用程序的每个模块，然后将所有的这些模块打包成一个或多个bundle
webpack天生就是做代码分割、模块化（分析你的项目结构，找到js模块以及其他一些浏览器不能直接运行的拓展语言-----Scss、TypeScript，并将其转换和打包为合适的格式，供浏览器使用），
优点：模块化——简化开发复杂度，节省开发时间，提高效率
一、webpack介绍
- 由来
由于前端之前js、css、图片文件需要单独进行压缩和打包，这样团队人员处理很繁琐，然后 Instagram 团队就想让这些工作自动化，然后webpack应运而生。 - 介绍
webpack是一个模块打包工具（module bundler），webpack视HTML，JS，CSS，图片等文件都是一种 资源 ，每个资源文件都是一个模块（module）文件，webpack就是根据每个模块文件之间的依赖关系将所有的模块打包（bundle）起来。
对模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源
Webpack将js、css、less转换成一个静态文件，减少了页面的请求
- 作用
对 CommonJS 、 AMD 、ES6的语法做了兼容
对js、css、图片等资源文件都支持打包（适合团队化开发）
比方你写一个js文件，另外一个人也写一个js文件，需要合并很麻烦，现在交给webpack合并很简单
有独立的配置文件webpack.config.js
可以将代码切割成不同的chunk，实现按需加载，降低了初始化时间
具有强大的Plugin（插件）接口，大多是内部插件，使用起来比较灵活
…… - 拓展说明 ----- CommonJS、AMD、CMD是用于JavaScript模块管理的三大规范
-------CommonJS
CommonJS定义的是模块的同步加载，是一个更偏向于服务器端的规范（也可以在浏览器中使用），主要用于Nodejs，根据CommonJS规范，一个单独的文件就是一个模块，加载模块使用require()方法，该方法读取一个文件并执行，最后返回文件内部的exports对象。
-------AMD、CMD
AMD和CMD则是定义模块异步加载适用于浏览器端，都是为了 JavaScript 的模块化开发，（这里说一下为什要有异步加载，因为浏览器如果使用common.js同步加载模块的话，就会导致性能等问题，所以针对这个问题，又出了一个规范，这个规范可以实现异步加载依赖模块）
-------AMD
AMD规范会提前加载依赖模块，AMD规范是通过requireJs 在推广过程中对模块定义的规范化产出。（AMD 规范：https://github.com/amdjs/amdjs-api/wiki/AMD）
-------CMD
CMD规范会延迟加载依赖模块， CMD 规范是 SeaJs 在推广过程中对模块定义的规范化产出。（CMD规范：https://github.com/seajs/seajs/issues/242）-------AMD规范和CMD规范的区别
对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）
-------CMD 推崇依赖就近，AMD 推崇依赖前置
AMD 的 API 默认是一个当多个用，CMD 的 API 严格区分，推崇职责单一。比如 AMD 里，require 分全局 require 和局部 require，都叫 require。CMD 里，没有全局 require，而是根据模块系统的完备性，提供 seajs.use 来实现模块系统的加载启动。CMD 里，每个 API 都简单纯粹
-------webpack和gulp的区别
gulp是前端自动化构建工具，强调的是前端开发的工作流程，我们可以通过配置一系列的task，定义task处理的事情（代码压缩、合并、编译、浏览器实时更新等），然后定义执行顺序，来让gulp执行这些task，从而构建项目的整个前端开发流程，自动化构建工具并不能把所有模块打包到一起，也不能构建不同模块之间的依赖关系。
-------webpack是 JavaScript 应用程序的模块打包器，强调的是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。
拓展：WebPack和Grunt以及Gulp相比有什么特性
-------其实Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。
-------Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。
-------Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。
-------如果实在要把二者进行比较，Webpack的处理速度更快更直接，能打包更多不同类型的文件
- webpack整体认知
webpack的核心概念分为 入口(Entry)、加载器(Loader)、插件(Plugins)、出口(Output);
5.1、入口（entry）
入口起点是告诉webpack从哪里开始，并根据依赖关系图来确定需要打包的文件内容。
5.2、加载器（loader）
因为webpack将所有资源（css、js、image等）都看作模块，但是webpack只能处理js文件，所以就需要一个能够将其他资源转为模块，让webpack能将其加入依赖树中的东西，那就是loader。①.他可以将模块的源代码进行转换；②.可以在import或‘加载’模块时预处理文件。因此，loader类似于其他构建工具的‘task（任务）’，并提供了处理前端构建步骤的强大方法。
rules: [ // loader
{
test: /\.(js|jsx)$/,
use: 'babel-loader'
}
]
5.3、插件(Plugins)：
loader 只能针对某种特定类型的文件进行处理，而 plugin 的功能则更为强大。在 plugin 中能够介入到整个 webpack 编译的生命周期，Plugins用于解决 loader 无法实现的其他事情，也就是说loader是预处理文件，那plugin 就是后处理文件。
对loader打包后的模块文件（bundle.js）进行二次优化处理，例如：代码压缩从而减小文件体积
提供辅助开发的作用：例如：热更新（浏览器实时显示）
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: './src/index.html'})
]
二、webpack安装
1、安装node
node -v // 检查版本
2、安装cnpm / npm
npm install -g cnpm // 国内淘宝镜像，访问稳定，推荐
npm install -g npm // 外网访问进行的安装，可能被翻墙
npm -v // 打开cmd，查看版本
3、安装webpack
npm install --g webpack // 全局安装
npm install --save-dev webpack // 安装到项目目录
三、webpack配置
----build：开发环境webpack编译打包输出的目录，同样按照view，styles，js组织。
----dist：生产环境webpack编译打包输出的目录，同样按照view，styles，js组织.
----node_modules：所使用的node。Js模块
----src：代码开发目录
----pack.json：项目配置。标准的npm说明文件，项目依赖模块，自定义的脚本任务…
----webpack.config.js：开发环境webpack配置
----webpack.production.config.js：生产环境webpack配置
- 先初始化一个项目
npm init // 会创建一个package.json文件
输入命令后，终端会有一系列问题：项目名称，项目描述，作者信息等，若不打算在npm中发布模块，回车默认即可
- package.json文件已就绪，在当前项目中安装webpack作为依赖包
npm install --save-dev webpack//--save是将配置信息保存到package.json中。
----save：项目生产环境。项目发布之后还依赖的东西，保存在dependencies。
eg：如果你用了jQuery，由于发布之后还是依赖jQuery，所以保存在dependencies。
----save-dev：项目开发环境，依赖的东西保存在devDependencies。
eg：写ES6的代码，要想编译成ES5发布，那么babel就是devDependencies。
- 通过配置文件来使用webpack打包
定义配置文件webpack.config.js，其实也是一个简单的js模块。包含打包信息。
在当前项目新建一个webpack.config.js文件，主要涉及内容是入口文件路径和打包后文件存放路径。
// webpack.config.js
module.exports = {
entry: _dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: _dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
}
}
_dirname是node.js中的一个全局变量，指当前执行脚本所在的目录。
有了配置文件后，再打包文件，只需要在终端运行webpack命令即可。（非全局安装需使用node_moduls/.bin/webpack）。命令会自动去引用配置文件的选项。
Webpack扩展：更多功能https://www.jianshu.com/p/42e11515c10f
- 生成Source Maps（同于调试）
只需要配置，webpack打包时就生成了。 - 使用webpack构建本地服务器
实时监听代码的修改，并自动刷新显示修改后的结果。基于node.js，需要在配置前安装它作为项目的依赖.
npm install --save-dev webpack-dev-server
- Loader加载器
使用不同的loader（不同的配置），使webpack有能力调用外部的脚本或工具，实现对不同格式的文件处理。像分析转换sass为css。
Loader需要单独安装并在配置文件中module关键字下进行配置：
①、test：匹配loader要处理的文件拓展名的正则表达式（必须）
// /.js$/
②、loader：loader名称（必须）
// ‘babel-loader’
③、include/exclude：手动添加必须处理的文件(夹)或屏蔽不需要处理的（可选）
[resolve（‘src’），resolve（‘test’）]
④、query：为loader提供额外的设置选项（可选）
安装loader前先了解下什么是babel？
一个编译js的平台：可以使用最新的js代码（ES6,ESS7…），不用考虑浏览器是否支持；可以使用基于js进行了拓展的语言，如react的jsx。
Babel的安装与配置 （js、css）
-------Babel其实是几个模块化的包，核心功能是babel-core，存在npm中。
-------Webpack可以把不同的babel包整合在一起使用，对于每一个需要的功能或拓展，都需要安装单独的包，使用最多的是ES6的babel-preset-env包和解析jsx的babel-preset-react包。
// npm一次性安装多个依赖模块，用空格隔开
npm install --save-dev babel-core babel-loader babel-preset-env
babel-preset-react
Js：
module.exports = {
entry: _dirname + "/app/main.js", //唯一入口文件
output: {
path: _dirname + "/public", //打包后的文件存放的地方
filename: "bundle.js" //打包后输出文件的文件名
},
devtool: 'eval-source-map', // 调试
devServer: { // 本地服务器监听
contentBase: "./public", //本地服务器所加载的页面所在的目录
historyApiFallback: true, //不跳转
inline: true //实时刷新
},
module: {
rules: [ // loader的规则
{
test: /(\.jsx|\.js)$/, // 能处理的文件类型后缀
use: { // loader类型
loader: "babel-loader",
options: {
presets: [
"env", "react"
]
}
},
exclude: /node_modules/
}
]
}};
Babel配置
Babel可以放在配置文件值配置的，考虑到babel会有很多配置选项，放在单一的配置文件中会显得文件复杂，所以可以把babel配置放在一个单独的名为‘.babelrc’文件中。Webpack会自动调用.babelrc里的babel配置选项。
//.babelrc
{
"presets": ["react", "env"] // ES6 react
}
一切皆为模块
Webpack超级优点：把所有文件都当做模块处理，js代码、css、fonts和图片等，都可以通过用合适的loader被处理。
Css
//安装
npm install --save-dev style-loader css-loader
css-loader：能够使用类似@import和url(…)的方法实现require()功能。
style-loader：将所有计算后的样式加入到页面。
两者结合使用可以将样式表嵌入到webpack打包后的js文件中（js中引入css）
//使用
module.exports = {
...
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader"
}
]
}
]
}};
Css module
css模块可以将所有的类名、动画名只作用于当前模块。在css loader中进行简单配置，就可以将类名传递到组件的代码中，不会造成类名的全局污染。
module.exports = {
...
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader",
options: {
modules: true, // 指定启用css modules
localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的类名格式
}
}
]
}
]
}
CSS 预处理器
Sass和less之类的预处理器是对原生css的拓展，有variables、nesting、mixins等特性。
Less loader sass loader
其实js有babel平台，css也有postCSS平台，可以为css代码自动添加适应不同浏览器的css前缀。
// 首先安装postcss-loader 和 autoprefixer（自动添加前缀的插件）
npm install --save-dev postcss-loader autoprefixer
//webpack.config.js
module.exports = {
...
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader",
options: {
modules: true
}
}, {
loader: "postcss-loader" // 新增
}
]
}
]
}}
// postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')
]
}
四、plugins（插件） -----内置插件、第三方插件
用于拓展webpack功能，还可以实现loader不能实现的。
Plugins是在整个构建过程中生效，执行相关任务，不直接操作单个文件。
Loader是在打包构建过程中用来处理源文件的（jsx，scss，less）一次处理一个。
五、plugins的使用
首先用new安装插件，然后再webpack配置中的plugins关键字里添加该插件的实例（plugins是一个数组）
const webpack = require('webpack');
module.exports = {...
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader",
options: {
modules: true
}
}, {
loader: "postcss-loader"
}
]
}
]
},
plugins: [
new webpack.BannerPlugin('版权所有，翻版必究')
],
};
扫一扫
710
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
