一文搞懂webpack！

什么是webpack?

• Webpack 是一个前端资源加载/打包工具（项目构建工具）。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

• webpack 提供了友好的模块化支持，以及资源的合并、打包、压缩、混淆、处理 js 兼容问题、性能优化等强大的功能，从而让程序员把工作的重心放到具体的功能实现上，提高了开发效率和项目的可维护性。

• webpack官网https://www.webpackjs.com/

 安装webpack

1. 运行 npm i webpack -g 全局安装webpack，这样就能在全局使用webpack的命令
2. 在项目根目录中运行`npm i webpack --save-dev`安装到项目依赖中
3. webpack4.0以后版本，需要安装命令工具 npm install webpack-cli -g
4. 查看webpack 信息   npm info webpack    4.0以后 直接输入该命令： webpack  -v 

 

使用webpack的配置文件简化打包时候的命令

1. 在项目根目录中创建webpack.config.js

2. 由于运行webpack命令的时候，webpack需要指定入口文件和输出文件的路径，所以，我们需要在webpack.config.js中配置这两个路径

单进单出

    // 导入处理路径的模块
    var path = require('path');

    // 导出一个配置对象，将来webpack在启动的时候，会默认来查找webpack.config.js，并读取这个文件中导出的配置对象，来进行打包处理
    module.exports = {
        entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件 __dirname当前模块目录名
       
        output: { // 配置输出选项
            path: path.resolve(__dirname, 'dist'), // 配置输出的路径
            filename: 'bundle.js' // 配置输出的文件名
        },
       
    }

 多进多出

var path = require('path');
module.exports = {
    entry: {
        index: './src/main.js',
        print: './src/main2.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "[name].index.js"
    }

}

多进单出

var path = require('path');
module.exports = {
  // 入口文件存入输入当中
  //统一打包为 finame后面的文件名
    entry: [
        path.resolve(__dirname, 'src/index.js'),
        path.resolve(__dirname, 'src/index2.js'),
    ],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
}

 

实现自动打开浏览器、热更新和配置浏览器的默认端口号

方式1：

修改package.json的script节点如下，其中--open表示自动打开浏览器，--port 4321表示打开的端口号为4321，--hot表示启用浏览器热更新：

"dev": "webpack-dev-server --hot --port 3003 --open"

方式2：

1. 修改webpack.config.js文件，新增devServer节点如下：

devServer:{
     static:'./src',
     open:true,
     port:3003,
     host:'127.0.0.1'
  }
    

1. 在头部引入webpack模块：【webpack4以后不需要使用热更新插件】

var webpack = require('webpack');

1. 在plugins节点下新增：【webpack4以后不需要使用热更新插件】

new webpack.HotModuleReplacementPlugin()

使用webpack打包css文件

在index.js中，把css作为模块引入

import $ from 'jquery';

import './index.css';//把css作为模块引入

$(function(){
    $('div').css({
        height:'200px',
        width:'200px',
        background:'skyblue'
    })
})

此时报错了：

您可能需要一个适当的加载器来处理这个文件类型，目前没有配置加载器来处理这个文件。

https://webpack.docschina.org/loaders/css-loader/

1. 运行npm i style-loader css-loader --save-dev

   运行npm run dev

   发现报错，需要进行配置

2. 修改webpack.config.js这个配置文件：

module: { // 用来配置第三方loader模块的
        rules: [ // 文件的匹配规则
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }//处理css文件的规则
        ]
    }

npm run dev 重新运行，发现css样式已经引入

注意：use表示使用哪些模块来处理test所匹配到的文件；use中相关loader模块的调用顺序是从后向前调用的；

使用webpack打包less文件

新建less文件 demo.less

在index.js中引入less

import $ from 'jquery';
import './index.css';

import './demo.less';

$(function(){
    $('div').css({
        height:'200px',
        width:'200px',
        background:'skyblue'
    })
})

运行报错

1. 运行npm i less-loader less --save-dev

2. 修改webpack.config.js这个配置文件：

{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },

npm run dev

使用webpack打包sass文件 

1. 运行 npm i sass-loader node-sass --save-dev

2. 在webpack.config.js中添加处理sass文件的loader模块

3. { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }