关于webpack 以及 webpack配置和常用插件的学习记录 （1）

主要概念：

1.   Entry :   webpack的入口，构建的第一步从entry开始。
2.   Output :   输出，经过webpack处理后的得到最终想要的代码。
3.   Loader :   模块转换工具，把模块的原本内容转换成新的浏览器能看得懂的东西。
4.   Plugin :    插件，可以注入你需要扩展的东西。
5.   Module：  在webpack中一切皆模块，一个模块对应一个文件，webpack会从配置的entry开始递归找出所有的模块。
6.   Chunk :   代码块，用于代码合并和分割。

context： 

　　webpack内相对路径的根目录，默认为webpack所在的当前目录。可配置    （context必须为绝对路径）

　　　　

module.export = {
   context: path.resolve(__dirname, 你要改变的路径)  
}

 

Entry：

　　入口模块的路径，可以写成 字符串、 数组 和 对象格式。

　　

entry: './index.js'

entry: ['./index1.js', './index2.js']

entry: {a: './index1.js', b: ['./index2.js', './index3.js']}

Output :

　　output配置怎样输出最终想要的代码，为一个对象，包含一系列的配置

　　1，filename

　　　　如果只有一个输出文件，那么直接写  filename： ‘bundle.js’

　　　　如果有多个chunk要输出，那么就要用到name变量了，webpack会为每一个chunk取一个名字，这时候就可以根据chunk的名称来区分输出的文件   filename:' [name].js'

　　2，chunkFilename

　　　　配置无入口的chunk在输出时的文件名称。

　　3，path

　　　　配置输出文件在本地存放的目录，必须是string类型的绝对路径。

　　4，publicPath

　　5，crossOrginLoading

　　6，libraryTarge和library

Module：

　　module是用来配置如何处理模块

　　1，rules ： 　  配置模块的读取和解析规则，一般是配置loader，类型为一个数组，里面的每一项都用来描述如何去处理匹配的文件。

　　　　　　　　　一般通过test、include和exclude三个配置来匹配loader要应用的文件

　　　　　　　　   选中后的文件通过use配置项来应用loader，可以应用一个loader或者按照前后顺序来应用一组的loader，还可以给loader添加参数。

　　　　　　　　   

module: {
   rules: [
     {
        test:/\.less$/,　　　　　　　　　　　　　　　　　　　　　　　　　　
        use: ['style-loader', 'css-loader', 'less-loader'],        
        include: path.resolve(__dirname, 'static/css')   
     },
     {
        test: /\.js$/,　　　　　　　　　　　　　　　　　　　　　　或者： test: [/\.jsx$/,/\.js$/]　　
        use: ['babel-loader'],
        exclude: path.resolve(__dirname, 'node_modules')   或者   exclude： [path.resolve(__dirname,'node_modules'), path.resolve(__dirname, 'nouse_modules')]
     }
  ]
}       

　　2， noParse

　　　　　让webpack忽略对部分没有采用模块化文件的递归解析和处理。

　　3，parser

　　　　   配置哪些模块化功能可以被解析，哪些不解析。  parser可以精确到语法层面上，noParse只能控制哪些文件不解析。　

　

 Resolve ：

　　resolve是用来配置webpack怎么寻找模块对应的文件。

　　1，akias

　　　　resolve.alias配置是通过别名来把原来的导入路径映射到一个新的路径

resolve:{
  alias: {
     '@': resolve('src')
  }
}

　　　　实际上是把导入语句中的@ 替换成了 '/src'

　　2，mainFields

　　　　有些第三方模块会提供几份不同环境的代码，比如es5代码，es6代码等。mainFields用来配置 引用第三方模块的时候，引用哪个版本的文件。

　　　　默认为 mainFields: ['browser', 'main']

　　3,extensions

　　　　在导入的文件没有带文件后缀时，webpack会自动带上extensions里面提供的后缀去寻找文件是否存在。

　　　　举例： 在vue项目中，一般写法为 extensions:['.js',  '.vue', '.json']

　　4，modules

　　　　resolve。modules是用来配置webpack去哪些目录去找第三方模块。默认是node_modules目录，如果有大量的模块都在 ./src/components 里面，我们可以用modules来优化。

　　　　　　modules: ['./src/components', 'node_modules']

　　5，descriptionFiles　

　　　　用来配置第三方模块的文件名称，也就是package.json文件。

　　6，enforceExtension

　　　　如果配置为true，所有的导入文件语句都要带文件后缀。

　　7，enforceModuleExtension

　　　　和enforceExtension作用类似，但只对node_modules下的模块生效。

Plugin：

　　plugin的配置项接收一个数组，数组的每一项都是要使用的插件的实例，插件需要的参数通过构造函数传入。 下面的插件是生成html文件

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
              filename: 'index.html'
        })
    ]
}        

　　配置plugin的难点是在 你用的plugin本身需要的配置项。

Target：

　　让webpack构建出针对不同运行环境的代码。有以下选项：

1. web    默认，针对浏览器
2. node   require语句加载chunk，针对node
3. async-node  异步加载chunk
4. webworker   针对webworker

          .......

DevTool：

　　配置webpack如何生成source map，默认是false。想让构建的代码生成source map方便调试，可以这样配置：

module.exports = {
    devtool: 'source-map'
}

watch：

　　webpack支持监听文件变化重新编译。默认是关闭的。

　　在使用devserver时，监听默认是开启的。

　　

Externals：

　　用来告诉webpack哪些模块不用被打包。

　　比如我们直接在项目的html中引入了jquery   <srcipt src='jquery.min.js'></script>。如果我们需要在模块中使用，可以还需要 import $ from 'jquery'，这样就导致了jquery出现了两次。

　　通过externals配置可以告诉webpack哪些已经引入全局了，针对这些全局的不用打包，可以直接使用全局变量。

module.exports = {
    externals: {
        jquery: 'jQuery'
    }
}

ResolveLoader：

　　resolveloader告诉webapck如何去找到对应的loader，默认在使用loader时是通过它的包名来引用的。