做教育网站有什么好处,网站设计两边为什么要留白,深圳 网站 传播,网站做端口映射Webpack 是当下最热门的前端资源模块化管理和打包工具。 什么是webpack Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔#xff0c;等到实际需要的时候再异… Webpack 是当下最热门的前端资源模块化管理和打包工具。 什么是webpack Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔等到实际需要的时候再异步加载。通过 loader 的转换任何形式的资源都可以视作模块比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。 Webpack 的特点 Webpack 和其他模块化工具有什么区别呢 代码拆分Webpack 有两种组织模块依赖的方式同步和异步。异步依赖作为分割点形成一个新的块。在优化了依赖树后每一个异步区块都作为一个文件被打包。LoaderWebpack 本身只能处理原生的 JavaScript 模块但是 loader 转换器可以将各种类型的资源转换成 JavaScript 模块。这样任何资源都可以成为 Webpack 可以处理的模块。智能解析Webpack 有一个智能解析器几乎可以处理任何第三方库无论它们的模块形式是 CommonJS、 AMD 还是普通的 JS 文件。甚至在加载依赖的时候允许使用动态表达式 require(./templates/ name .jade)。插件系统Webpack 还有一个功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的还可以开发和使用开源的 Webpack 插件来满足各式各样的需求。快速运行Webpack 使用异步 I/O 和多级缓存提高运行效率这使得 Webpack 能够以令人难以置信的速度快速增量编译。开始使用 安装 首先要安装 Node.js Node.js 自带了软件包管理器 npmWebpack可以通过npm去安装。 用 npm 安装 Webpack $ npm install webpack -g此时 Webpack 已经安装到了全局环境下可以通过命令行 webpack -h 试试。 通常我们会将 Webpack 安装到项目的依赖中这样就可以使用项目本地版本的 Webpack。 # 进入项目目录
# 确定已经有 package.json没有就通过 npm init 创建
# 安装 webpack 依赖
$ npm install webpack --save-dev查看webpack # 查看 webpack 版本信息
$ npm info webpack安装指定版本的 webpack $ npm install webpack1.12.x --save-dev如果需要使用 Webpack 开发工具要单独安装 $ npm install webpack-dev-server --save-dev使用 首先创建一个静态页面 index.html 和一个 JS 入口文件 entry.js !-- index.html --
html
headmeta charsetutf-8
/head
bodyscript srcbundle.js/script
/body
/html// entry.js
document.write(It works.)然后编译 entry.js 并打包到 bundle.js $ webpack entry.js bundle.js打包过程会显示日志 Hash: e964f90ec65eb2c29bb9
Version: webpack 1.12.2
Time: 54msAsset Size Chunks Chunk Names
bundle.js 1.42 kB 0 [emitted] main[0] ./entry.js 27 bytes {0} [built]用浏览器打开 index.html 将会看到 It works. 。 接下来添加一个模块 module.js 并修改入口 entry.js // module.js
module.exports It works from module.js.// entry.js
document.write(It works.)
document.write(require(./module.js)) // 添加模块重新打包 webpack entry.js bundle.js 后刷新页面看到变化 It works.It works from module.js.
Hash: 279c7601d5d08396e751
Version: webpack 1.12.2
Time: 63msAsset Size Chunks Chunk Names
bundle.js 1.57 kB 0 [emitted] main[0] ./entry.js 66 bytes {0} [built][1] ./module.js 43 bytes {0} [built]Webpack 会分析入口文件解析包含依赖关系的各个文件。这些文件模块都打包到 bundle.js 。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时会先执行 entry.js 中的代码其它模块会在运行 require 的时候再执行。 Loader Webpack 本身只能处理 JavaScript 模块如果要处理其他类型的文件就需要使用 loader 进行转换。 Loader 可以理解为是模块和资源的转换器它本身是一个函数接受源文件作为参数返回转换的结果。这样我们就可以通过 require 来加载任何类型的模块或文件比如 CoffeeScript、 JSX、 LESS 或图片。 先来看看 loader 有哪些特性 Loader 可以通过管道方式链式调用每个 loader 可以把资源转换成任意格式并传递给下一个 loader 但是最后一个 loader 必须返回 JavaScript。Loader 可以同步或异步执行。Loader 运行在 node.js 环境中所以可以做任何可能的事情。Loader 可以接受参数以此来传递配置项给 loader。Loader 可以通过文件扩展名或正则表达式绑定给不同类型的文件。Loader 可以通过 npm 发布和安装。除了通过 package.json 的 main 指定通常的模块也可以导出一个 loader 来使用。Loader 可以访问配置。插件可以让 loader 拥有更多特性。Loader 可以分发出附加的任意文件。loader 一般以 xxx-loader 的方式命名xxx 代表了这个 loader 要做的转换功能比如 json-loader。 Loader 可以在 require() 引用模块的时候添加也可以在 webpack 全局配置中进行绑定还可以通过命令行的方式使用。 接上一节的例子我们要在页面中引入一个 CSS 文件 style.css首页将 style.css 也看成是一个模块然后用 css-loader 来读取它再用 style-loader 把它插入到页面中。 /* style.css */
body { background: yellow; }修改 entry.js require(!style-loader!css-loader!./style.css) // 载入 style.css
document.write(It works.)
document.write(require(./module.js))安装 loader npm install css-loader style-loader重新编译打包刷新页面就可以看到黄色的页面背景了。 如果每次 require CSS 文件的时候都要写 loader 前缀是一件很繁琐的事情。我们可以根据模块类型扩展名来自动绑定需要的 loader。 将 entry.js 中的 require(!style-loader!css-loader!./style.css) 修改为 require(./style.css) 然后执行 $ webpack entry.js bundle.js --module-bind cssstyle!css# 有些环境下可能需要使用双引号
$ webpack entry.js bundle.js --module-bind cssstyle!css显然这两种使用 loader 的方式效果是一样的。 配置文件 Webpack 在执行的时候除了在命令行传入参数还可以通过指定的配置文件来执行。默认情况下会搜索当前目录的 webpack.config.js 文件这个文件是一个 node.js 模块返回一个 json 格式的配置信息对象或者通过 --config 选项来指定配置文件。 示例 创建一个配置文件 webpack.config.js var webpack require(webpack)module.exports {entry: ./entry.js,output: {path: __dirname,filename: bundle.js},module: {loaders: [{test: /\.css$/,loader: style-loader!css-loader}]}
}webpack.config.js参数详解 webpack.config.js文件通常放在项目的根目录中它本身也是一个标准的Commonjs规范的模块。在导出的配置对象中有几个关键的参数 entry entry参数定义了打包后的入口文件有三种写法每个入口称为一个chunk: 类型示例解释字符串entry: ./index/index.js配置模块会被解析为模块并在启动时加载。chunk名为默认为main 具体打包文件名视output配置而定。 数组entry: [./src/mod1.js, [...,] ./src/index.js]所有的模块会在启动时 按照配置顺序 加载合并到最后一个模块会被导出。chunk名默认为main对象entry:{index: ..., login : [...]}如果传入Object,则会生成多个入口打包文件key是chunk名value可以是字符串也可是数组。{entry: {page1: ./page1,//支持数组形式将加载数组中的所有模块但以最后一个模块作为输出page2: [./entry1, ./entry2]},output: {path: dist/js/page,publicPath: /output/,filename: [name].bundle.js}
}该段代码最终会生成一个 page1.bundle.js 和 page2.bundle.js并存放到 ./dist/js/page 文件夹下 output output参数是个对象定义了输出文件的位置及名字 output: {path: dist/js/page,publicPath: /output/,filename: [name].bundle.js}path: 打包文件存放的绝对路径publicPath: 网站运行时的访问路径filename:打包后的文件名当我们在entry中定义构建多个文件时filename可以对应的更改为[name].js用于定义不同文件构建后的名字。 module 在webpack中JavaScriptCSSLESSTypeScriptJSXCoffeeScript图片等静态文件都是模块不同模块的加载是通过模块加载器webpack-loader来统一管理的。loaders之间是可以串联的一个加载器的输出可以作为下一个加载器的输入最终返回到JavaScript上 loader使用需要先安装再加入到配置下中。 Loaders需要单独安装并且需要在webpack.config.js下的modules关键字下进行配置Loaders的配置选项包括以下几方面 test一个匹配loaders所处理的文件的拓展名的正则表达式必须loaderloader的名称必须include/exclude:手动添加必须处理的文件文件夹或屏蔽不需要处理的文件文件夹可选query为loaders提供额外的设置选项可选loaders之 预处理 css-loader 处理css中路径引用等问题style-loader 动态把样式写入csssass-loader scss编译器less-loader less编译器postcss-loader scss再处理
module: {//加载器配置loaders: [//.css 文件使用 style-loader 和 css-loader 来处理{ test: /\.css$/, loader: style-loader!css-loader },//.less 文件使用 less-loader、cssloader来编译{ test:/\.less$/, loader: style!less}//.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理{ test: /\.scss$/, loader: style!css!sass?sourceMap},]}loaders之 react处理 babel-loader babel官网 // npm一次性安装多个依赖模块模块之间用空格隔开
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-reactmodule: {loaders: [{test:/\.jsx?$/,exclude:/node_modules/,loader:babel,query:{presets:[react,es2015]}}]
}loaders之 es6转化处理 babel-loader 以及 babel-preset-es2015安装 以上两个插件 npm install babel-loader --save-devnpm install babel-preset-es2015 --save-dev创建bable的配置文件{presets: [es2015]
}loaders之 图片处理 url-loadernpm install --save-dev url-loadrmodule: {loaders: [{test: /\.(png|jpg|gif)$/,loader: url-loader?limit10000namebuild/images/[name].[ext]}]
}对于上面的配置如果图片资源小于10kb就会转化成 base64 格式的 dataUrl其他的图片会存放在build/images文件夹下。 loaders之 文件处理 file-loader
npm install --save-dev file-loadermodule: {loaders: [{test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,loader: file},]
}示例 module: {//加载器配置loaders: [//.css 文件使用 style-loader 和 css-loader 来处理{ test: /\.css$/, loader: style-loader!css-loader },//.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理{ test: /\.scss$/, loader: style!css!sass?sourceMap},//图片文件使用 url-loader 来处理小于8kb的直接转为base64{ test: /\.(png|jpg)$/, loader: url-loader?limit8192}]} 插件Plugins 插件Plugins是用来拓展Webpack功能的它们会在整个构建过程中生效执行相关的任务。 Webpack有很多内置插件同时也有很多第三方插件可以让我们完成更加丰富的功能。 使用插件的方法 要使用某个插件我们需要通过npm安装它然后要做的就是在webpack配置中的plugins关键字部分添加该插件的一个实例plugins是一个数组继续看例子我们添加了一个实现版权声明的插件。 module.exports {plugins: [new webpack.BannerPlugin(Copyright Nico inc.)//在这个数组中new一个就可以了]
}HtmlWebpackPlugin 这个插件的作用是依据一个简单的模板帮你生成最终的HTML5文件这个文件中自动引用了你打包后的JS文件。每次编译都在文件名中插入一个不同的哈希值。 安装 npm install --save-dev html-webpack-plugin这个插件自动完成了我们之前手动做的一些事情在正式使用之前需要对一直以来的项目结构做一些改变 在app目录下创建一个Html文件模板这个模板包含title等其它你需要的元素在编译过程中本插件会依据此模板生成最终的html页面会自动添加所依赖的 css, jsfavicon等文件在本例中我们命名模板文件名称为index.tmpl.html模板源代码如下 index.tmpl.html !DOCTYPE html
html langenheadmeta charsetutf-8titleWebpack/title/headbodydiv idbox/div/body
/htmlwebpack.config.js var webpack require(webpack);
var HtmlWebpackPlugin require(html-webpack-plugin);
module.exports {plugins: [new HtmlWebpackPlugin({template: __dirname /app/index.tmpl.html//new 一个这个插件的实例并传入相关的参数})]
}ExtractTextPlugin 分离CSS和JS文件 安装 npm install --save-dev extract-text-webpack-pluginwebpack.config.js var webpack require(webpack);
var ExtractTextPlugin require(extract-text-webpack-plugin);...plugins: [new HtmlWebpackPlugin({template: __dirname /app/index.tmpl.html}),new webpack.optimize.OccurenceOrderPlugin(),new webpack.optimize.UglifyJsPlugin(),new ExtractTextPlugin(style.css)]
}合并公共代码 项目中对于一些常用的组件站点公用模块经常需要与其他逻辑分开然后合并到同一个文件以便于长时间的缓存。要实现这一功能配置参照: var webpack require(webpack);
var CommonsChunkPlugin webpack.optimize.CommonsChunkPlugin;···
entry: {a: ./index/a.js,b: ./idnex/b.js,c: ./index/c.js,d: ./index/d.js
},
···
plugins: [new CommonsChunkPlugin(part.js, [a, b]),new CommonsChunkPlugin(common.js, [part1, c])
]
··· 代码压缩 webpack 自带了一个压缩插件 UglifyJsPlugin只需要在配置文件中引入即可。 {plugins: [new webpack.optimize.UglifyJsPlugin({compress: {warnings: false}})]
}加入了这个插件之后编译的速度会明显变慢所以一般只在生产环境启用。 其他用法 缓存 缓存无处不在使用缓存的最好方法是保证你的文件名和文件内容是匹配的内容改变名称相应改变 webpack可以把一个哈希值添加到打包的文件名中使用方法如下,添加特殊的字符串混合体[name], [id] and [hash]到输出文件名前 var webpack require(webpack);
var HtmlWebpackPlugin require(html-webpack-plugin);
var ExtractTextPlugin require(extract-text-webpack-plugin);module.exports {entry: __dirname /app/main.js,output: {path: __dirname /build,filename: [name]-[hash].js},module: {},plugins: [new HtmlWebpackPlugin({template: __dirname /app/index.tmpl.html}),new webpack.optimize.OccurenceOrderPlugin(),new webpack.optimize.UglifyJsPlugin(),new ExtractTextPlugin([name]-[hash].css)]
}去除多个文件中的频繁依赖 当我们经常使用React、jQuery等外部第三方库的时候通常在每个业务逻辑JS中都会遇到这些库。
如我们需要在各个文件中都是有jQuery的$对象因此我们需要在每个用到jQuery的JS文件的头部通过require(jquery)来依赖jQuery。 这样做非常繁琐且重复因此webpack提供了我们一种比较高效的方法我们可以通过在配置文件中配置使用到的变量名那么webpack会自动分析并且在编译时帮我们完成这些依赖的引入。 webpack.config.js中 var webpack require(webpack);...
plugins: [new webpack.ProvidePlugin({Moment: moment,$: jquery,jQuery: jquery,window.jQuery: jquery,React: react})
]
...设置环境命令 要告诉webpack我们希望当前是什么环境只需要在命令中写入 BUILD_DEV1 webpck 那么webpack通过配置就会将所有我们引用到的__DEV__变量设置为true。 我们可以在package.json中事先定义好命令 scripts: {dev: BUILD_DEV1 webpack-dev-server --progress --colors,build: BUILD_PRERELEASE1 webpack -p
}那么就可以避免输入冗长的命令了 开发时输入 npm run dev发布时输入: npm run build常用命令
webpack的使用和browserify有些类似下面列举几个常用命令 webpack 最基本的启动webpack命令
webpack -w 提供watch方法实时进行打包更新
webpack -p 对打包后的文件进行压缩
webpack -d 提供SourceMaps方便调试
webpack --colors 输出结果带彩色比如会用红色显示耗时较长的步骤
webpack --profile 输出性能数据可以看到每一步的耗时
webpack --display-modules 默认情况下 node_modules 下的模块会被隐藏加上这个参数可以显示这些被隐藏的模块目录结构 /├── shell/ 脚本│├── conf/ 工程配置│├── src/ 开发目录│ ├── components/ 组件│ ├── pages/ 页面│ ├──├── dist/ 自动生成│├── test/ 测试│├── node_modules/ 自动生成包含.Node 依赖以及开发依赖│├── static/ 库文件等不会被webpack的loader处理,手动管理│└── etc完整的目录结构 projectTemplate/ ├── shell/ node脚本 │ ├──│ ├── dev-server.js 本地开发服务器│ ├── build.js 打包脚本│ ├── utils.js 工具函数│ ├── ├── conf/ 工程配置 │ ├──│ ├── index.js 基础配置文件在此可简单的修改webpack相关配置│ ├── webpack.base.js webpack的基础配置主要是loader、resolve的配置│ ├── webpack.dev.js webpack开发配置主要是eslint、livereload、hot module replacement及相关的插件│ ├── webpack.prod.js webpack生产配置主要是代码的压缩混淆图片压缩加hash│ ├── karma.conf.js 测试配置│ ├──├── src/ 开发目录│ ├── components/ 组件│ ├── pages/ 页面页面下的项目目录需要遵循一定的规范以便创建webpack的入口文件不过这些规范是可以调整的以下只是推荐│ ├── index/ 首页│ ├── images/ 图片资源│ ├── page.css 样式文件文件名称可以按照自己意愿命名│ ├── page.js 脚本文件及webpack的入口文件文件名称可以在/conf/index.js配置│ ├── template.html 模板文件及要撰写的html文件文件名称可以在/conf/index.js配置│ ├──│ ├── dist/ 自动生成│ ├── test/ 测试目录可以意愿来创建但是测试文件名称必须遵循*_test.js的命名规范可在/conf/karma.conf.js修改配置│ ├── node_modules/ 自动生成包含node依赖以及开发依赖│ ├── static/ 库文件等不会被webpack的loader处理,手动管理│ └── etc 使用webpack构建本地服务器 想不想让你的浏览器监测你都代码的修改并自动刷新修改后的结果其实Webpack提供一个可选的本地开发服务器这个本地服务器基于node.js构建可以实现你想要的这些功能不过它是一个单独的组件在webpack中进行配置之前需要单独安装它作为项目依赖 npm install --save-dev webpack-dev-serverdevserver作为webpack配置选项中的一项具有以下配置选项 devserver配置选项功能描述contentBase默认webpack-dev-server会为根文件夹提供本地服务器如果想为另外一个目录下的文件提供本地服务器应该在这里设置其所在目录本例设置到“public目录port设置默认监听端口如果省略默认为”8080“inline设置为true当源文件改变时会自动刷新页面colors设置为true使终端输出的文件为彩色的historyApiFallback在开发单页应用时非常有用它依赖于HTML5 history API如果设置为true所有的跳转将指向index.html如下配置 module.exports {...devServer: {contentBase: ./public,//本地服务器所加载的页面所在的目录colors: true,//终端中输出结果为彩色historyApiFallback: true,//不跳转inline: true//实时刷新}
}转载于:https://www.cnblogs.com/zhangruiqi/p/7656206.html
