WebPack

webpack

背景

有很多的内容并不能直接被浏览器所识别，所以需要一些工具去通过打包进行转换，比如less、sass、ts、图片等需要转换为浏览器可以识别的js和css等。

基本内容

基本要素

input
output
module: 即loader的配置，翻译非javascript文件为webpack可理解的文件（webpack自己只理解javascript）
plugins:执行范围更广、更具体的功能，与loader相比，loader只是翻译作用，但plugins作用更侧重于具体的功能，如html-webpack-plugin（生成html文件，为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题）、css压缩、图片压缩、定义环境变量等
mode: 模式，主要有开发模式和生产模式，生产模式会压缩js文件

      //webpack.config.js


      module.exports={

         
          entry:'./src/index.js',
               
          output:{
              path:path.resolve(__dirname,'dist'),
              filename:'bundle.js'

          },
          module:{
              rules:[
                        
                  //css翻译器

                  {
                      //正则匹配后缀
                      test:/\.css$/,
                      use:[
                          //从下往上执行
                          //创建style标签，将js样式资源插入
                          style-loader,
                          // 以commonjs标准将css文件模块加载到js中
                          css-loader,
                      ]
                  },

                  //lass翻译

                  {
                      //正则匹配后缀
                      test:/\.css$/,
                      use:[
                          //从下往上执行
                          //创建style标签，将js样式资源插入
                          style-loader,
                          // 以commonjs标准将css文件模块加载到js中
                          css-loader,
                          // lass转换成css
                          lass-loader,
                      ]
                  }

              ],
          },
                
          plugin:[
              {

              }
          ],

          mode:"development"





      }

webpack：可以处理js、json文件，但不能处理css、图片等文件，所以要loader、plugins

内容

CATALOG

FEATURED TAGS

FRIENDS