webpack学习记录

图 1原理图

webpack学习记录

webpack将所有的文件都视为模块（html除外）

四个核心概念：入口，输出，加载，插件

什么式webpack?

webpack是一个模块打包器（bundler）

在webpack看来，前端的所有资源文件（js/hson/css/img/less/......）都会作为模块处理

它将根据模块的依赖关系进行静态分析，生成对应的静态资源

理解Loader

webpack本省自能加载JS/JSON模块，如果要加载其他类型的文件（模块），就需要使用对应的loader进行转换加载

Loader本省也是运行在node.js环境中的JavaScript模块

它本身是一个函数，接收源文件作为参数，返回转换的结果

loader一般以xxx-loader的方式命名，xxx代表了这个loader要做的转换功能，比如json-loader。

配置文件（默认）

webpack.config.js:是一个node模块，返回一个json格式的配置信息对象

插件

插件可以完成一些loader不能完成的功能

插件的使用一般实在webpack的配置信息plugins选项中指定。

CleanWebpackPlugin:自动清除指定文件夹资源

HmlWebpackPlugin:自动生成HTML文件

UglifyJSPlugin:压缩js文件

webpack学习记录

Time:表示当前打包所花费的事件

Asset:静态资源

Size:文件大小

Chunk Names:主模块

原文件字节大小：xxx bytes[]

[0]:对应的是 webpack学习记录

加载从其他地方汇聚过来的模块

在webpack1.级版本中，不支持ES6语法

需要在主模块中引入其他子模块

webpack学习记录

当import引入json文件的时候会自动转换为对象Object

webpack 本身可以加载js,json模块

使用webpack配置文件

webpack.config.js

const path = require('path'); //node内置的模块，用来去设置路径的：

//webpack真正的配置

module.exports = {

entry: './src/js/entry.js', //入口文件（主文件）的配置

output: { //出口/输出的配置

filename: 'bundle.js', // 输入的文件名

path: path.resolve(__dirname, 'dist/js/') // 设置文件的路径 __dirname：表示根目录

}};

配置好以后，就可以直接使用webpack命令

webpack学习记录

打包CSS和图片文件

直接加载会报这样的错误

webpack学习记录

webpack本身不能打包CSS和图片文件，所以需要下载对应的loader

npm install css-loader style-loader --save-dev // CSSloader

npm install file-loader url-loader --save-dev // 图片文件loader

补充：url-loader是对昂file-loader的上层封装，使用时需配合file-loader使用

在webpack.config.js中去配置loader

{
    test: /\.css$/,
    use: [ 'style-loader', 'css-loader' ]
},
{
    test: /\.(png|jpg|gif)$/,
    use: [
        {
            loader: 'url-loader',
            options: {
                limit: 8192  // 8*1024
            }
        }
CSSloading：负责加载css样式到主文件中，但是它没有办法应用到实际页面中，需要通过style-loading可以把cssloading加载的样式动态添加到标签中

直接使用url-loader可以将小于8kb的图片以base64编码直接打包到js中

这样就能减少请求的次数

base算法：base算法是可逆的

哈希值算法，将一个二进制字符串，转换为另一个长度较小的字符串，而且这种转换时不可逆的

大于8kb的图片在打包后会自动生成一个新的名字，而且不会被自动引用所以会报错。因为index.html会自动在它的同级目录中去寻找该图片

webpack学习记录

最简单最省力的解决方案，将index.html和图片放在同一个文件夹下面，注意修改引入js文件的路径

第二中办法：

在webpack.config.js中的output下面加上publishPath:’js/’

webpack学习记录

但是这种方式不被推荐，因为设置为index.html提供资源服务的时候带有强制性会影响热加载。

自动编译打包：

利用webpack开发服务器工具:webpack-dev-server

下载方式：

npm install --save-dev webpack-dev-server

webpack配置

下载了以后会自动的有： webpack-dev-server 这个命令(即热加载)

webpack-dev-server :会自动将打包文件放在一个内存比如locahost:8080

所以需要在webpack.config.js中去配置

devServer: {
contentBase:'./dist' //webpack-dev-server默认服务于根路径下的index.html
},

当在publicPath：””中进行配置以后，就必须要在index.js中进行相应的配置改动。否则页面会显示不出来，因为publicPath会指定index.html到相应的路径去加载文件

使用webpack插件：

常用的插件：

使用html_webpack-plugin根据模板html生成引入script页面
使用clean-webpack-plugin清除dist文件夹

安装：

npm install --save-dev html_webpack-plugin clean-webpack-plugin

引入：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin')；

配置：

plugins: [
new HtmlWebpackPlugin({template: './index.html'}), //根据当前指定路径的index页面生成新的index.html页面，它会自动为引入的js资源进行引入js标签
new CleanWebpackPlugin(['dist/*'])
]

图 1原理图

相关推荐