webpack初步了解
webpack初步了解
- webpack初步了解
- 构建工具
- 构建工具的功能
- 常用的构建工具
- webpack介绍
- webpack命令
- webpack常用配置介绍
- 出入口 Entry&Output
- entry配置
- output的配置
- 模块 Module
- 模块加载（转换）器 Loader
- loader学习
- 使用loader的三种方式
- babel
- 插件 Plugin
- 出入口 Entry&Output
- webpack-dev-server
- devServer配置项
- webpack插件
- extract-text-webpack-plugin
- 开发/生产环境打包
- webpack项目中的最佳配置
- 构建工具
构建工具
构建工具的功能
- 代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。
- 文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。
- 模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。
- 代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
- 自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器。
- 代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。
常用的构建工具
- grunt
- gulp
- fis3(百度)
- webpack模块化管理工具，可以对模块进行：
- 压缩
- 预处理
- 按需打包
- 按需加载
- 热加载
webpack介绍
- webpack可以看做是模块打包机，它做的事情是：
- 分析你的项目结构，找到JavaScript模块；
- 其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等）；
- 并将其转换和打包为合适的格式供浏览器使用；
- Webpack和Grunt以及Gulp相比有什么特性
- Webpack和另外两个并没有太多的可比性；
- Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案；
- Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具；
- Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。
- Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。
- webpack特征
- 插件化：webpack本身非常灵活，提供了丰富的插件接口。基于这些接口，webpack开发了很多插件作为内置功能
- 速度快：webpack使用异步IO以及多级缓存机制。所以webpack的速度是很快的，尤其是增量更新。
- 丰富的Loaders：loaders用来对文件做预处理。这样webpack就可以打包任何静态文件。
- 高适配性：webpack同时支持AMD/CommonJs/ES6模块方案。webpack会静态解析你的代码，自动帮你管理他们的依赖关系。此外，webpack对第三方库的兼容性很好。
- 代码拆分：webpack可以将你的代码分片，从而实现按需打包。这种机制可以保证页面只加载需要的JS代码，减少首次请求的时间。
- 优化：webpack提供了很多优化机制来减少打包输出的文件大小，不仅如此，它还提供了hash机制，来解决浏览器缓存问题。
- 开发模式友好：webpack为开发模式也提供了很多辅助功能。比如SourceMap、热更新等。
- 使用场景多：webpack不仅适用于web应用场景，也适用于Webworkers、Node.js场景
webpack命令
- webpack 执行一次开发时的编译
- webpack -p 执行一次生成环境的编译（压缩）
- webpack –watch 在开发时持续监控增量编译（很快）
- webpack -d 让他生成SourceMaps
- webpack –progress 显示编译进度
- webpack –colors 显示静态资源的颜色
- webpack –display-chunks 展示编译后的分块
- webpack –display-modules 列出打包模块
- webpack –display-reasons 显示更多引用模块原因
- webapck –display-error-details 显示更多报错信息
webpack常用配置介绍
出入口 Entry&Output
- entry：入口
- 关联的很多其他需要打包的文件
- output：出口
- path：文件打出的路径，这个path是nodejs内置的方法；
entry和output配置
- path：文件打出的路径，这个path是nodejs内置的方法；
entry配置
- entry是指需要打包的文件；
- entry有几种使用方法：
- 字符串
entry:__dirname+'/src/script/main.js'
//对应
output:{
path:__dirname+'/dist/js',
filename:'bundle.js'
}- 数组
entry:[
__dirname+'/src/script/main.js',
__dirname+'/src/script/a.js'
]
//对应
output:{
path:__dirname+'/dist/js',
filename:'bundle.js'
}- 对象
entry:{
main:__dirname+'/src/script/main.js',
a:__dirname+'/src/script/a.js'
}
//对应
output:{
path:__dirname+'/dist/js',
filename:'[name]-[hash].js'
}
//or
output:{path:__dirname+'/dist/js',filename:'[name]-[chunkhash].js'}output的配置
- output是指打包生成的文件
- entry中输入多个chunk时，为确保文件名唯一避免相互覆盖使用占位符命名filename；
- 三种占位符
- [name]是chunk的name；
- [hash]是本次打包的hash值，hash值相同；
- [chunkhash]是每个chunk的hash值，不同文件同次打包不相同，保证文件的唯一性，只有改变文件中的内容时hash才变化，未做改变的文件hash值不变；
模块 Module
module：模块，在 Webpack眼里一切皆模块，默认只识别js文件, 如果是其它类型文件利用对应的loader转换为js模块。
- rules：做很多的规定，比如：加载css、将es6编译成es5;
- “-loader”其实是可以省略不写的，多个loader之间用“!”连接起来
module: { //加载器配置 loaders: [ //.css 文件使用 style-loader 和 css-loader 来处理 { test: /\.css$/, loader: 'style-loader!css-loader' }, //.js 文件使用 jsx-loader 来编译处理 { test: /\.js$/, loader: 'jsx-loader?harmony' }, //.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理 { test: /\.scss$/, loader: 'style!css!sass?sourceMap'}, //图片文件使用 url-loader 来处理，小于8kb的直接转为base64 { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'} ] }- webpack本身只能加载js模块，如果需要加载其他类型的文件（模块），就需要使用对应的loader进行转换/加载；
- 如果我们想要在js文件中通过require引入模块，比如css或image，那么就需要在这里配置加载器，这一点对于React来说相当方便，因为可以在组件中使用模块化CSS。而一般的项目中可以不用到这个加载器。
- module 的作用是添加loaders, 那loaders有什么作用呢？
模块加载（转换）器 Loader
- loader：模块加载器，将非js模块包装成webpack能理解的js模块；
- loader用于转换应用程序的资源文件。他们是运行在nodejs下的函数，使用参数来获取一个资源的来源，并且返回一个新的来源（资源的位置）。
- 文件loader:
- url-loader 像 file loader 一样工作，但如果文件小于限制，可以返回 data URL
- file-loader 将文件发送到输出文件夹，并返回（相对）URL
- JSON的loader
- json-loader 加载 JSON 文件（默认包含）
- ES5-6的loader
- babel-loader 加载 ES2015+ 代码，然后使用 Babel 转译为 ES5
- css的loader
- style-loader 将模块的导出作为样式添加到 DOM 中
- css-loader 解析 CSS 文件后，使用 import 加载，并且返回 CSS 代码
- less-loader 加载和转译 LESS 文件
- sass-loader 加载和转译 SASS/SCSS 文件
- stylus-loader 加载和转译 Stylus 文件
- 代码规范loader
- eslint-loader PreLoader，使用 ESLint 清理代码
vue的loader
- vue-loader 加载和转译 Vue 组件
resolve
- alias可以用于定义别名，用过seajs等模块工具的都知道alias的作用，比如我们在这里定义了ui这个别名，那么在模块中想引用ui目录下的文件，就可以直接这样写：
require('ui/dialog.js');不用加上前面的更长的文件路径。
- alias可以用于定义别名，用过seajs等模块工具的都知道alias的作用，比如我们在这里定义了ui这个别名，那么在模块中想引用ui目录下的文件，就可以直接这样写：
resolve: {
//查找module的话从这里开始查找
root: 'E:/github/flux-example/src', //绝对路径
//自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
extensions: ['', '.js', '.json', '.scss'],
//模块别名定义，方便后续直接引用别名，无须多写长长的地址
alias: {
AppStore : 'js/stores/AppStores.js',//后续直接 require('AppStore') 即可
ActionType : 'js/actions/ActionType.js',
AppAction : 'js/actions/AppAction.js'
}
}loader学习
- 学习网址：https://webpack.js.org/concepts/loaders/；
- Webpack 本身只能处理原生的js模块，但是loader转换器可以将各种类型的资源转换成js模块。这样，任何资源都可以成为Webpack可以处理的模块。
使用loader的三种方式
- 在文件中直接引入loader文件，es6的语法
//es6的语法
import Styles from 'style-loader!css-loader?modules!./styles.css';
//commonjs语法
require('style-loader!css-loader?modules!./styles.css')- 在命令行界面使用的方式CLI
//直接执行
webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'- 在配置文件中使用loader
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true
}
}
]
}
]
}babel
- Babel通过语法转换器支持最新版本的JavaScript。这些插件允许你立刻使用新语法，无需等待浏览器支持。
- 在src文件夹下创建component文件夹，component里面创建layer组件，组件里有js、css、html文件；
- 在src文件夹中创建入口js文件,app.js;
//app.js中引入html
import layer from './component/layer/layer.js'
const App = function() {
console.log(layer)
}
new App()
//layer.js中渲染模板
import tpl from './layer.html'
function layer() {
return {
name: 'layer',
tpl: tpl
}
}
export default layer;- 安装babel转化es6的代码
npm install --save-dev babel-loader babel-core(webpack3版本) - 使用babel加载器将es6的语法进行转化，转化时要指定参数，方式有三种：
- 使用配置指定
//在配置webpack.config.js中添加
module: {
rules: [{
test: /\.js$/,
loader: "babel-loader",
//加快打包速度的配置
//排除范围
exclude: __dirname + '/node_modules/',
//babel-loader的处理范围
include: '/src/',
//webpack3中使用options代替query
options: {
'presets': ['env']
}
}]
}- 在package.json中添加
"babel":{
"presets":["env"];
}- 根目录下创建.babelrc文件
{
"presets": ["env"]
} 插件 Plugin
- plugin：插件，在webpack构建流程中的特定时机插入具有特定功能的代码；
//使用了CommonsChunkPlugin用于生成公用代码，不只可以生成一个，还能根据不同页面的文件关系，自由生成多个，例如：
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
entry: {
p1: "./page1",
p2: "./page2",
p3: "./page3",
ap1: "./admin/page1",
ap2: "./admin/page2"
},
output: {
filename: "[name].js"
},
plugins: [
new CommonsChunkPlugin("admin-commons.js", ["ap1", "ap2"]),
new CommonsChunkPlugin("commons.js", ["p1", "p2", "admin-commons.js"])
]
};
// 在不同页面用