webpack学习

非全局安装命令

# webpack非全局安装的情况node_modules/.bin/webpack app/main.js public/bundle.js

webpack打包

webpack {entry file} {destination for bundled file}# {extry file}出填写入口文件的路径，本文中就是上述main.js的路径，# {destination for bundled file}处填写打包文件的存放路径# 填写路径的时候不用添加{}指定入口文件后，webpack将自动识别项目所依赖的其它文件如果你的webpack不是全局安装的，那么当你在终端中使用此命令时，需要额外指定其在node_modules中的地址

加入到webpack中

devServer: {    contentBase: \"./public\

一切皆模块

loader

通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理或者把下一代的JS文件（ES6，ES7)转换为现代浏览器兼容的JS文件对React的开发而言，合适的Loaders可以把React的中用到的JSX文件转换为JS文件

css现状

CSS发展就相对慢一些，大多的样式表却依旧巨大且充满了全局类名，维护和修改都非常困难

css-loader和style-loader

webpack提供两个工具处理样式表，css-loader 和 style-loader，二者处理的任务不同，css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。

导入.root到Greeter.js中

交由npm引导执行的配置

类似java热部署

npm install --save-dev webpack-dev-server你的浏览器监听你的代码的修改，并自动刷新显示修改后的结果

需要修改 的只有一行注释行

{  \"name\": \"webpack-sample-project\

npm init

，终端会问你一系列诸如项目名称，项目描述，作者等信息，不过不用担心，如果你不准备在npm中发布你的模块，这些问题的答案都不重要，回车默认即

package.json中的script会安照一定顺序寻找命令对应位置，本地的node_modules/.bin路径就在这个寻找清单中，所以无论是全局还是局部安装的Webpack，都不用写详细地址

如何写这个配置文件

根目录下新建一个名为webpack.config.js的文件，目前的配置主要涉及到的内容是入口文件路径和打包后文件的存放路径。

插件

扩展webpack功能loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程其作用。

接口和类

module.exports = {  entry:  __dirname + \"/app/main.js\

配置文件方式

定义一个配置文件，这个配置文件其实也是一个简单的JavaScript模块，我们可以把所有的与打包相关的信息放在里面

通过配置文件使用webpack

创建packge.json

创建一个package.json文件，这是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等。在终端中使用npm init命令可以自动创建这个package.json文件

配置到dev-tool

webpack的配置文件中配置source maps，需要配置devtool，它有以下四种不同的配置选项正如上表所述，上述选项由上到下打包速度越来越快，不过同时也具有越来越多的负面作用，较快的打包速度的后果就是对打包后的文件的的执行有一定影响对小到中型的项目中，eval-source-map是一个很好的选项，再次强调你只应该开发阶段使用它，我们继续对上文新建的webpack.config.js，进行如下配置:

CSS module

使用配置到webpack

生成Source Maps（使调试更容易）

通过打包后的文件，你是不容易找到出错了的地方，对应的你写的代码的位置的，Source Maps就是来帮我们解决这个问题的webpack就可以在打包时为我们生成的source maps，这为我们提供了一种对应编译文件和源文件的方法

webpack工作方式

把你的项目当做一个整体，通过一个给定的主文件（如：index.js）Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件

安装

//全局安装npm install -g webpack//安装到你的项目目录npm install --save-dev webpack

npm的配置

在package.json中对scripts对象进行相关设置

常用的css预处理loader

Less LoaderSass LoaderStylus Loader

配置文件写法

npm执行命令

在终端中输入npm run server即可在本地的8080端口查看结果

babel安装

Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，webpack可以把其不同的包整合在一起使用每一个你需要的功能或拓展，你都需要安装单独的包（用得最多的是解析Es6的babel-env-preset包和解析JSX的babel-preset-react包）

babel扩展配置

babel的配置选项放在一个单独的名为 \".babelrc\" 的配置文件中分两个配置文件进行配置（webpack会自动调用.babelrc里的babel配置选项）

配置sourcemap

npm引导任务执行

npm可以引导任务执行，对npm进行配置后可以在命令行中使用简单的npm start命令来替代上面略微繁琐的命令

webpack

module.exports = {font color=\"#ff6666\

Greeter.css

/* Greeter.css */.root {  background-color: #eee;  padding: 10px;  border: 3px solid #ccc;}

引入模块并插入

main.js文件中我们写入下述代码，用以把Greeter模块返回的节点插入页面//main.js const greeter = require('./Greeter.js');document.querySelector(\"#root\").appendChild(greeter());

文件结构

配置到webpack

在webpack中配置Babel的方法如下:

css预处理

比较

WebPack和Grunt以及Gulp相比有什么特性Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具

产品阶段构建

npm配置本地服务器开启，实现热部署

在package.json中的scripts对象中添加如下命令，用以开启本地服务器：  \"scripts\": {    \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\

创建模块并导出

Loaders 和 babel

更快捷的执行打包任务

模块处理

它把所有的文件都都当做模块处理，JavaScript代码，CSS和fonts以及图片等等通过合适的loader都可以被处理。

实现

添加babel

//安装npm install --save-dev style-loader css-loader

babel

Babel其实是一个编译JavaScript的平台让你能使用最新的JavaScript代码（ES6，ES7...），而不用管新标准是否被当前使用的浏览器完全支持；让你能使用基于JavaScript进行了拓展的语言，比如React的JSX；

index.html 中js文件引入

我们在index.html文件中写入最基础的html代码，它在这里目的在于引入打包后的js文件（这里我们先把之后打包后的js文件命名为bundle.js，

webpack强大之处热部署 、sourcemap

触发打包

只需在终端里运行webpack(非全局安装需使用node_modules/.bin/webpack)命令就可以了，这条命令会自动引用webpack.config.js文件中的配置

相同的类名也不会造成不同组件之间的污染

例子，添加版权声明的插件 webpack配置

css模块化

CSS modules的技术意在把JS的模块化思想带入CSS中来，通过CSS模块，所有的类名，动画名默认都只作用于当前模块

安装和使用

loader使用

背景

.babelrc

//.babelrc{ \"presets\": [\"react\

webpack干啥

WebPack可以看做是模块打包机分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用