webpack常见用法（一）

webpack的简介

• https://www.webpackjs.com/concepts/ 中文官网
• webpack是一个现代化js应用程序的静态模块打包器,在处理应用程序时他会递归构建一个依赖关系图,包含应用程序所需的每个模块然后将这些模块打包成一个活多个bundle
• webpack的配置是作为一个模块导出的
• webpack的基本配置项包括:一个项目的入口、出口、loader、插件、模式

入口 entry 构建内部依赖图的开始位置

module.exports = {
    entry:'./src/index.js'
}

出口 output 用来标识生成的bundle文件存放的位置

• output中包含path和filename选项，path为生成后的文件夹的绝对路径，filename表示输出的文件名

output:'./dist'，
filename:'main.js'

loader webpack默认只支持js文件及json文件,loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后利用webpack的打包功能对他们进行处理

• loader的配置有两个属性分别为 test 和 use,其中test用来匹配需要转换文件的扩展名,use表示用哪个loader进行转换
• 常用的解析css的loader有style-loader、css-loader、less-loader、sass-loader
• use中的执行顺序是从右像左执行;css-loader只负责加载css文件，style-loader负责将css具体样式嵌入到文档中,少了两个中的任何一个css文件都不会生效
• 常用的解析图片的loader有fileloader和url-loader
• file-loader1.拷贝图片 2.把图片模块变成JS模块
• https://www.npmjs.com/package/url-loader loader配置

module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }//用来转换文本拿到文本中的内容
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      { test: /\.less$/, use: ['style-loader', 'css-loader','less-loader'] }, 
      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
      {teat:/\.(jpg|png|gif|bmp)$/,use:[{
          loader:'url-loader',
          options:{
              name:'[hash10].[ext]',
              esModule:false,
              limit:10*1024,
              // 如果文件的体积小于limit，小于8K的话，就转成BASE64字符串内嵌到HTML中，否则 行为和file-loader
          }
      }],
    ]
  }

plugin 插件列表

插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。可以用来处理各种各样的任务。

• 在使用插件之前应先引入插件（require）然后添加到plugin列表中,多数插件可以通过option自定义
• HtmlWebpackPlugin 用来将js脚本在也面中自动引入
• HtmlWebpackExternalsPlugin https://www.npmjs.com/package/html-webpack-externals-plugin
• 可以根据在程序中应用到的不同的插件在npm 中查找对应插件的用法

new HtmlWebpackPlugin({
        template: './src/index.html',//定义需要引入脚本的模板
    }),

mode 当前运行模式；可以是开发环境、生产环境，还可以没有环境

mode:'production'