Webpack详解

1.webpack概述及安装

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

Webpack可以将多种静态资源js、css、less转换成一个静态文件，减少了页面的请求。

• 安装

  //全局安装
  npm install -g webpack webpack-cli
  
  //安装后查看版本号
  webpack -v

• webpack 合并js 是通过配置webpack.config.js ,配置打包规则，webpack默认只合并js

  //在webpack.config.js文件中配置
  //导入path模块 nodejs内置模块
  const path=require("path");
  
  //定义JS打包规则
  module.exports={
        entry:"./src/main.js",
        output:{
                 path:path.resolve(__dirname,"./dist"),
                 filename:"bundle.js"
        }
  }

• webpack合并css、和style 是通过 style-losder和css-loader 转换器

  //安装 style-loader和css-loader
  npm install --save-dev style-loader  css-loader

•  修改webpack.config.js

  const path=require("path");//nodejs内置模块
  module.exports={
      //
      output:{
  
      },
      module:{
          rules:[
              {
                  test:/\.css$/,//打包规则应用内到以css结尾的文件上
                  use:['style-loader','css-loader']
              }
          ]
      }
  }