Webpack 学习

Posted 2021-03-08 wepedblogs

什么是文本pack

从本质上讲，Webpack是一个现代javascript应用的静态模块打包工具，它可以分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

安装webpack

1 //全局安装
2 npm install -g webpack
3 //安装到项目目录
4 npm install webpack --save-dev

webpack配置文件

const path = require(‘path‘)
//_dirname 是 node.js 中的一个全局变量，它指向当前执行脚本所在的目录
module.exports={
  entry: ‘./src/main.js‘, // 要打包的文件入口
  output: {
    path: path.resolve(__dirname, ‘dist‘), //打包后的绝对输出路径
    filename: "bundle-text.js", // 打包输出后的文件名
  },

//  配置loader

　　module: {

     rules: [

      { 

        test: /.css$/, 

        use: [‘style-loader‘,‘css-loader‘] //use使用多个loader时，要从右向左写

    }

  ]

  }

}

 loader: 

• 通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理
• 比如说分析转换scss为css，或者把下一代的JS文件（ES6，ES7)转换为现代浏览器兼容的JS文件，对React的开发而言，合适的Loaders可以把React的中用到的JSX文件转换为JS文件
• Loaders需要单独安装并且需要在webpack.config.js中的modules关键字下进行配置。

       test: 用来匹配loaders所处理文件的拓展名的正则表达式

       loader:loader的名称

// 配置图片，在小于limit给出字节数以下的转化为base64，大于limit给出的字节数时通过file-loader模块加载，显示原图片
{
     test: /.(png|jpe?g|gif|svg|cur)(?.*)?$/,
     loader: ‘url-loader‘,
     options: {
        limit: 10000,
        name: ‘img/[name].[hash:8].[ext]‘//打包后图片命名
  }
}

当重新打包后，运行项目会出现图片路径错误。这时候就要在output下重新添加publicPath：‘/打包后图片存储路径‘

ES6语法处理

在webpack中直接使用babel对应的loader。,babel是一种javascript编译器，它可以javascript编译成可以执行的版本

rules: [
  //js 匹配所有的js，用babel-loader转译  排除掉node_modules
  {
    test: /(.jsx|.js)$/,
    use: {
      loader: "babel-loader"
   },
      exclude: /node_modules
   },