Webpack的使用

亦凉 2021-12-03 11:27 368阅读 0赞

# 一、了解Webpack #

**　　1、什么是webpack**  
　　　　Webpack是一个模块打包器(bundler)  
　　　　在Webpack看来，前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。它将根据模块的依赖关系进行静态分析，生成对应的模态资源

**2、理解Loader**  
　　　　Webpack本身只能加载JS/JSON模块，如果要加载其他类型的文件(模块)，就需要使用对应的loader进行转换/加载  
　　　　Loader本身也是运行在node.js环境中的JavaScript模块，它本身是一个函数，接受源文件作为参数，返回转化的结果  
　　　　loader一般以xxx-loader的方式命名，xxx代表了这个loader要做的转换功能，比如json-loader

**3、配置文件**  
　　　　webpack.config.js：是一个node模块，返回一个json格式的配置信息对象

**4、插件**  
　　　　插件可以完成一些loader不能完成的功能。插件的使用一般是在webpack的配置信息pluguins选项中指定

**5、Webpack中文文档：https://www.webpackjs.com/concepts/**

# 二、Webpack的简单使用 #

**　　1、初始化项目**  
　　新建空项目，创建package.json文件，局部安装webpack(可选，安装过node会自动全局安装webpack)  
　　package.json文件内容：  
　　　　\{  
　　　　　　"name": "webpack\_test",  
　　　　　　"version": "1.0.0"  
　　　　\}

**2、创建入口entry.js**  
　　　　入口函数中整合所有的资源

**3、使用webpack配置文件**

创建webpack.config.js

const path = require('path'); //path内置的模块，用来设置路径。
    
    module.exports = {
        entry: './src/js/entry.js', // 入口文件
        output: { // 输出配置
            filename: 'bundle.js', // 输出文件名
            path: path.resolve(__dirname, 'dist') //输出文件路径配置
        }
    };

在package.json文件中添加

"scripts": {
        "build": "webpack"
    }

**4、启动打包**  
　　　　webpack

# 三、打包css和图片文件 #

**1、安装对应的loader**

npm install css-loader style-loader --save-dev
    npm install file-loader url-loader --save-dev
    注：url-loader是对象file-loader的上层封装，使用时需配合file-loader使用。

**　2、在webpack.config.js中配置loader**

module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
    　　　　　　test: /\.(png|jpg|gif)$/,
    　　　　　　use: [
    　　　　　　　　{
    　　　　　　　　　　loader: 'url-loader',
    　　　　　　　　　　options: {
    　　　　　　　　　　　　limit: 8192 
    　　　　　　　　　　}
    　　　　　　　　}
    　　　　　　]
    　　　　}
    　　]
    }

**　　3、入口函数entry.js中导入样式**

**　　4、问题**

大图无法打包到entry.js文件中，会在资源目录下生成。ndex.html不在生成资源目录下时，页面加载图片会在所在目录位置查找，导致页面加载图片时候大图路径无法找到  
　　　　解决办法：  
　　　　　　①使用publicPath : 'dist/js/' //设置为index.html提供资源的路径,设置完后找所有的资源都会去当前目录下找，这种方法会导致无法使用热部署。  
　　　　　　②将index.html放在dist/js/也可以解决。

# 四、测试环境下自动编译打包 #

利用webpack开发服务器工具: **webpack-dev-server**  
　　**安装**：npm install --save-dev webpack-dev-server  
　　在webpack.config.js中配置：

devServer: {
    　　contentBase: 'dist/'
    }

**　　启动命令：webpack-dev-server**

# 五、使用webpack插件 #

**　　1、常用的插件**

使用html-webpack-plugin根据模板html生成引入script的页面  
　　　　使用clean-webpack-plugin清除dist文件夹  
　　　　使用uglifyjs-webpack-plugin压缩打包的js文件

**2、使用**   
　　　　npm install --save-dev html-webpack-plugin clean-webpack-plugin

**　　3、webpack配置**

const HtmlWebpackPlugin = require('html-webpack-plugin'); //自动生成html文件的插件
    const {CleanWebpackPlugin} = require('clean-webpack-plugin'); //清除之前打包的文件 
    plugins: [
    　　new HtmlWebpackPlugin({template: './index.html'}),
    　　new CleanWebpackPlugin(),
    ]

**4、启动**  
　　创建模板页面，使用webpack命令启动生成资源

转载于:https://www.cnblogs.com/hucheng1997/p/11209206.html