webpack
2016-02-15 10:55:49 5 举报AI智能生成
登录查看完整内容
为你推荐
查看更多
Webpack 是一个开源的前端打包工具，它可以将多个模块文件按照一定的规则和顺序进行打包，生成优化后的静态资源。Webpack 主要用于处理 JavaScript、CSS 等静态资源，支持模块化开发和热更新等功能。通过配置不同的加载器和插件，Webpack 可以实现对各种格式的文件进行处理，如图片、字体等。此外，Webpack 还具有代码分割、tree shaking 等功能，可以有效地减小打包后的文件体积，提高网页加载速度。总之，Webpack 是一个强大且灵活的前端构建工具，广泛应用于现代前端项目中。
作者其他创作
大纲/内容
webpack
是什么
1. 一个打包工具2. 一个模块加载工具3. 各种资源都可以当成模块来处理
目标
1. 将依赖树拆分，保证按需加载2. 保证初始加载的速度3. 所有静态资源可以被模块化4. 丰富的插件，可以整合第三方的库和模块5. 可以构造大系统
WebPack的安装
1. 安装命令：$ npm install webpack -g
2.\u00A0使用webpack：$ npm init \u00A0 // 会自动生成一个package.json文件\u00A0 \u00A0 \u00A0 \u00A0 \u00A0 \u00A0 \u00A0 \u00A0 \u00A0 \u00A0 \u00A0 \u00A0 \u00A0 \u00A0 $ npm install webpack --save-dev \u00A0 // \u00A0将webpack增加到package.json文件中
3.\u00A0可以使用不同的版本：$ npm install webpack@1.2.x --save-dev
4.\u00A0如果想要安装开发工具：$ npm install webpack-dev-server --save-dev
WebPack的配置
每个项目下都必须配置一个 webpack.config.js，告诉 webpack 它需要做什么
webpack config
entry
配置要打包的文件的入口，可以配置多个入口文件
resolve
配置查找模块的路径和扩展名或别名，除了js，还有jsx、coffee等等
output
配置输出文件的路径，文件名等(即入口文件最终要生成什么名字的文件、存放到哪里)
module(loaders)
配置要使用的loader，对文件进行一些相应的处理。
plugins
配置要使用的插件
copy目录下的文件到输出目录
安装：npm install transfer-webpack-plugin \u00A0-save
打包静态资源
css/sass/less
安装css-loader和style-loader，如下：
npm install css-loader --save -dev
npm install style-loader --save -dev
images/iconfont
可以通过url-loader把较小的图片转换成base64的字符串内嵌在生成的文件里
安装：npm install url-loader --save -dev
0 条评论
回复 删除
下一页
