视频学习笔记06

视频学习笔记

webpack的loader学习

loader

loader是webpack中的一个核心概念，在开发中需要加载css，图片，也包括一些高级的ES6转ES5代码，将typescript转成ES5代码，将scss、less转成css，将.jsp .vue转成js文件等

loader的使用过程

通过npm安装需要使用的loader，在webpack.config.js中的modules关键字下进行配置
对css文件的配置
安装加载css文件的loader：npm install --save-dev css-loader
安装处理css文件的loader：npm install style-loader --save-dev
在webpack.config.js文件中进行配置

rules:[
	{
	      // 匹配css文件
          test:/\.css$/,
          use: ['style-loader', 'css-loader']
	}
]

less文件的配置
安装：npm install --save-dev less-loader
配置webpack.config.js文件，还是在rules数组里配置

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

webpack对图片文件的处理

安装：npm install --save-dev url-loader
配置webpack.config.js文件

            {
                test: /\.(png|jpg|gif)$/i,
                use: [
                  {
                    loader: 'url-loader',
             options: {
                      limit: 8192,
                      name: 'img/[name].[hash:8].[ext]'
                    },
                  },
                ],
              },

options选项里的limit是对加载图片大小的限制，当加载的图片小于limit时，会将图片编译成base64字符串格式；当加载图片大于limit时，需要使用file-loader模块进行加载。
再次下载：npm install file-loader --save-dev
重新执行npm run build打包，但是会发现webpack打包时把图片一并打包到dist文件夹下，这时要设置webpack.config.js文件：publicPath: 'dist/'

webpack对es6语法处理

webpack打包的js文件，写的es6语法没有转成es5语法。要将es5语法转成es6，就可以使用babel
安装：npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
配置webpack.config.js文件

              {
                test: /\.m?js$/,
                // 排除
                exclude: /(node_modules|bower_components)/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    // presets: ['@babel/preset-env']
                    presets: ['es2015']
                  }
                }
              }

webpack对vue的配置

用npm install vue --save导入依赖，在main.js里导入vue，重新打包运行程序，但是会发现在html中使用时没有效果，是因为runtime-only代码中不可以有任何的template，配置webpack.config.js文件解决resolve

    resolve:{
      // alias 别名
      // 包含complier
      // 解决省略扩展名
      alias: {
        // extensions: ['.js','.css', '.vue'],
        'vue$':'vue/dist/vue.esm.js'
      }
    }