webpack

2019-02-20 本文已影响0人葵葵的花园

一、

1.webpack通过loader可以支持各种语言和预处理器编写模块。webpack的各种loader描述了webpack如何处理非javascript模块，并且在bundle（包）中引入这些依赖。被用于转换某些类型的模块。
2.即webpack可以使用loader来预处理文件。允许打包除javascipt之外的任何静态资源。可以在import或“加载模块”时预处理文件。
3.loader可以将所有类型的文件转换为webpack能够处理的有效模块，然后利用webpack的打包能力，对他们进行处理。
webpack官方loader

预处理器是在真正的编译开始之前由编译器调用的独立程序。预处理器可以删除注释，包含其它文件以及执行宏替代等。

在应用程序中有三种使用loader的方式：

配置（推荐）：在webpack.config.js文件中指定loader

嘿，webpack编译器，在你碰到【在require()/import语句中被解析为'.css'的路径】时，在你对它进行打包之前，先用style-loader和css-loader转换一下。

//1.命令行运行：先安装所需对应的loader
npm install -D css-loader ts-loader
//2.配置方式使用loader（常用）
//webpack的js配置文件：
moudle.exports = {
  moudle:{
    rules:[
      { test:/\.css$/,  //必须属性，标识出应该被对应的loader进行转换的某个或某些文件
        use:[  //必须属性，表示进行转换时，应该使用哪个loader
          { loader:'style-loader '},
          {
            loader:'css-loader',
            options:{ //这是loader的额外配置项
              modules:true
            }
          }
      ]},
      {test:/\.ts$/, use:'ts-loader'}
    ]
  }
}

内联：在每个import语句中显示指定loader

//2.内联方式使用loader
import css from ' !style-loader!cdd-loader!./css/index.css'

CLI：在shell(命令行)命令中指定它们。

//3.CLI方式使用loader：会对.jade文件使用jade-loader，会对.css文件使用style-loader和css-loader
webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'

loader常用于：压缩，打包，语言翻译等

二、

webpack插件列表
1.loader被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务，包括打包优化、压缩和重新定义环境中的变量等。插件是webpack生态系统的重要组成部分，为社区用户提供了一种强大方式来直接触及webpack的编译过程。
2.使用：

require()插件
将插件添加到plugins数组里。多数插件可以通过选项option自定义
使用new操作符来创建它的一个实例

const HtmlWebpackPlugin = require('html-webpack-plugin')
const config = {
  plugins : [
    new HtmlWebpackPlugin(template :'./src/index.html')
  ]
}

三、

1.output.path 是所有打包后的文件输出的目标路径，必须是绝对路径。比如：output输出的js,url-loader解析的图片，HtmlWebpackPlugin生成的html文件，都会存放在以output.path为基础的目录下。
2.out.publicPath并不会对生成文件的路径造成影响，主要是对你的页面引入的资源的路径做对应的补全。常见的就是css文件里面引入的图片。html里引入的资源路径会手动改变，没有影响。

module.exports = {
  output : {
    filename : 'js/[name].js',  //[name]表示出口文件的名字和入口文件名字一样
    path : path.resolve(__dirname , 'dist')  
    publicPath : './dist/'
  }
}

__dirname 表示当前文件所在目录的绝对路径
__filename 表示当前文件的绝对路径
path.resolve() 将从右到左对给定路径进行处理，生成绝对路径

参考理解示例

四、

webpack-dev-server的相关配置

1.

webpack-dev-serve是webpack官方提供粉人一个小型Express服务器，可以为打包生成的资源文件提供web服务。主要有两个功能：

为静态文件提供服务
自动刷新和热替换（HMR）

2.常用配置项

module.exports = {
  devServe : {
    contentBase : '/dist', 
    compress : true, //是否启用服务器压缩
    port: 7777,
    host :'127.7.7.1',
    proxy:{
      '/api/v1/user' : { //匹配满足/api/v1/user这种格式的请求地址
        target : 'http://gs.uestc1.com',
        changeOrigin : true
      },
      '/api' : {
        target : 'http://gs.uestc2.com',
        changeOrigin : true
      },
      '/test' : {
        target : 'http://gs.uestc3.com',
        changeOrigin : true
      },
    }
  }
}

示例：dev-serve如上配置

1.请求1的地址：/api/v1/user/staff

配置的有host，所有请求会自动补充前缀。完整请求地址为：http://127.7.7.1:7777/api/v1/user/staff
使用了http-proxy进行代理重定向地址，代理从上到下依次匹配请求地址的格式，若满足则重定向到配置的新地址。
这里，请求1的地址能匹配到第一个/api/v1/user，所以该请求地址将会从http://127.7.7.1:7777/api/v1/user/staff重定向到 http://gs.uestc1.com/api/v1/user/staff这个地址去请求数据。
这个重定向是后台进行，所以浏览器的上显示的地址还是host地址：http://127.7.7.1:7777/api/v1/user/staff

注意：如果大范围匹配的请求地址包含小范围匹配的地址，那么小范围的匹配必须写在大范围匹配的前面，不然小范围的匹配不会生效。

webpack

一、

二、

三、

四、

1.

2.常用配置项

猜你喜欢

热点阅读