webpack--基础

webpack

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

entry

入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

可以通过在 webpack 配置中配置 entry 属性，来指定一个入口起点（或多个入口起点）。默认值为 ./src

单入口

{
    // 入口文件
    main: './src/index.js'
}

多入口

1.输入为一个数组，但是入口文件最终只会形成一个chunk，输出出去只有一个bundle文件。

module.exports = {
    entry: ['./src/index.js','./src/add.js']
}

2.输入为对象，有几个入口文件就形成几个chunk，输出几个bundle1文件

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

动态入口

输入为一个函数（同步或异步），用于动态的返回上面所需的入口内容。

module.exports = {
    entry: () => new Promise((resolve) => resolve(['./src/index.js','./src/add.js']))
}

 

output

指示webpack如何去输出、以及在哪里输出你的bundle、asset 和其他你所打包或使用 webpack载入的任何内容。

{
    // 打包后的js文件
	filename: 'bundle.js',
    // 路径, 需要使用path的resolve转化为绝对路径
    path: path.resolve(__dirname, "dist")
}

 

Loader

webpack只能理解JavaScript和JSON文件，通过loader让webpack能够去处理其它类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。

处理非js文件的预处理器，可以打包非js的静态文件  

如果有非js文件的，需要指定规则，告诉webpack需要加载什么loader去处理

从下到上加载loader

 file-loader

module: {
    result: [{
        以.png结尾的文件
        test: /\.png$/,
        use: {
        	// 将文件发送到输出文件夹，并返回（相对）URL
        	loader: 'file-loader'
    	}
    }]
  }

    url-loader

• 可以将文件打包成base64格式进js文件中
• url-loader可以实现file-loader的功能

• 对于图片资源来说，主要可以分为html中图片和非html中图片。对于url-loader或file-loader能够处理js、css等中的图片资源，但是不能直接处理html中的图片资源，所以需要引用html-loader，负责引入img，从而能被url-loader进行处理。

module: {
    rules: [
        {
            test: /\.(png|jpg|gif)$/,
            loader: 'url-loader',
            options: {
                limit: 8 * 1024,
                name: '[hash:10].[ext]',
                outputPath: 'asset/images'
            }
        },
        {
            test: /\.html/,
            loader: 'html-loader',
        },
    ]
}  

 

postcss-loader

对于css和less这样的样式资源，webpack不能直接进行处理，所以需要经过webpack翻译后才可以使用。此外不同浏览器对CSS的支持不同，为了CSS解决兼容性问题，可借助postcss-loader进行处理。

配置 postcss-loader 时，可以在 webpack.config.js 中配置具体选项，也可以新建一个 postcss.config.js，专门定义 postcss-loader 的配置。

autoprefixer为postcss-loader的一个插件

如果直接在 webpack.config.js 中配置：

{
  test: /\.css$/,
  use: [
    'style-loader',
    'css-loader',
    {
      loader: 'postcss-loader',
      options: {
        plugins: [
          require('autoprefixer')
        ]
      }
    }
  ]
}

 

css-loader style-loader

css-loader和style-loader需要在一起使用

module: {
    rules: [{
        test: '/\.scss$/',
        use: [
            'style-loader',
            {
                loader: 'css-loader',
                option: {
                    // 这个参数的作用是当解析一个css文件的时候，css文件里面引入了一个scss文件，解析的顺序是从下往上的，再次解析scss文件的时候，前面的sass-loader就不会解析了，因此这个参数的作用就是让引入的文件全部从最开始进行解析
                    importLoaders: 2,
                    // 以模块块的形式引入css，就不会造成css样式的冲突
                    modules: true
                }
            },
            'sass-loader',
            'postcss-loader'
        ]
    }]
}

 

plugin

 HtmlWebpackPlugin

HtmlWebpackPlugin在打包之后回自动生成一个html文件，并且将打包后的js文件自动引入到html文件中

plugins: [new HtmlWebpackPlugin({
	template: './src/index.html',        // template可以指定文件的模板来进行构建
})]

 

 CleanWebpackPlugin

在打包之前移除之前的打包文件

const { CleanWebpackPlugin } = require('clean-webpck-plugin')
plugins: [
	new CleanWebpackPlugin()
]