webpack安装_五分钟弄懂webpack原理和常用方法

一、webpack的作用和原理

webpack的基础能力：处理依赖、模块化、打包。 webpack的工作原理：进行代码分析，找到“require、exports”等关键词，并替换成对应模块的引用。 在一个配置文件中，指明对某些文件进行编译、压缩、组合等任务。将项目当成一个整体，通过指定的主文件index.js，webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包成一个浏览器可以识别的js文件。

二、webpack的核心概念

入口(entry) 用于指定本次webpack打包的地址。

单入口：module.exports = {  entry: './path/to/my/entry/file.js'};或module.exports = {  entry:{    main:'./path/to/my/entry/file.js'  }};多入口module.exports = {  entry：{     main:'./path/to/my/entry/file.js',     other:'./path/to/my/entry/file.js'  }}

出口(output) 用于指定打包完成之后输出文件地址及文件名，文件地址为绝对路径。  

module.exports = {  entry: './path/to/my/entry/file.js',  output: {    path: path.resolve(__dirname, 'dist'),    filename: 'my-first-webpack.bundle.js'  }};

loader loader让webpack能够处理那些非JavaScript文件，将所有类型的文件转换成webpack能够处理的有效模块。 插件(plugins) loader被用于转换某些类型的模块，而插件则可以执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。 使用插件只需要require它，然后添加到plugins数组中。多数插件可以通过选项(option)自定义。也可以在一个配置文件中因为不同目的而多次使用同一插件，这是需要通过使用new操作符来创建它的一个实例。

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装const webpack = require('webpack'); // 用于访问内置插件const config = {  module: {    rules: [      { test: /\.txt$/, use: 'raw-loader' }    ]  },  plugins: [    new HtmlWebpackPlugin({template: './src/index.html'})  ]};

模式(mode) 用于指定当前的构建环境

module.exports = {  mode: 'production'  //development 或 production};

三、webpack的基础使用

html-webpack-plugin

作用：这个插件主要作用是打包后自动生成html页面。

安装：npm i html-webpack-plugin -D 

const HtmlWebpackPlugin = require('html-webpack-plugin')plugins: [      new HtmlWebpackPlugin({          template: './src/index.html',//模板文件地址          filename: 'index.html',//指定打包后的文件名字          hash: true，//也可给其生成一个hash值      }),  ],

es6转es5 安装：npm i babel-loader @babel/core @babel/preset-env -D

{      test: /\.js$/,      use: {          loader: 'babel-loader',          options: {              presets: [                  '@babel/preset-env'              ],          }      }  },

cleanWebpackPlugin  作用： 每次打包自动删除输出目录下的文件 安装： npm i clean-webpack-plugin -D

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

copyWebpackPlugin

作用：将指定目录的文件复制到指定目录下 安装： npm i copy-webpack-plugin -D

const CopyWebpackPlugin = require('copy-webpack-plugin')plugins:[      new CopyWebpackPlugin({            patterns: [{                from: path.join(__dirname, 'public'),                to: 'dist'            }],        }),]

bannerPlugin 作用：代码头部添加版权申明 安装： webpack上的一个自带插件

const webpack = require('webpack')plugins:[      new webpack.BannerPlugin('core by codelee'),]

happypack 作用：多线程打包 安装： npm install --save-dev happypack

const Happypack = require('happypack')module:{    rules: [{        test: /\.css$/,        use: 'happypack/loader?id=css'    }]}plugins:[   new Happypack({        id: 'css',        use: ['style-loader', 'css-loader']    })]

压缩css和js 作用：将上面输出的css文件做压缩处理 安装：npm i optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin -D

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')const UglifyJsPlugin = require('uglifyjs-webpack-plugin')    optimization: {        minimizer: [            new UglifyJsPlugin({                cache: true,                parallel: true,                sourceMap: true            }),            new OptimizeCSSAssetsPlugin({})        ]    },

处理css 作用：安装两个loader即css-loader(处理css中的@important语法)、 style-loader用于将css插入head标签 安装： npm i css-loader style-loader -D

  module: {      rules: [          {              test: /\.css$/,              use: ['style-loader','css-loader']          },      ]  }

热更新 作用：代码更新是页面只会更新该更新的地方而不是重新渲染整个页面，即重新刷新页面。热更新插件也是webpack上自带的

devServer: {        hot: true,        port: 3000,        contentBase: './dist',        open: true    }, plugins:[     new webpack.HotModuleReplacementPlugin() ]

splitChunks

作用：代码分包 

module.exports = {  optimization: {    splitChunks: {             // 分割代码块，针对多入口      cacheGroups: {           // 缓存组        common: {              // 公共模块          minSize: 0,          // 大于0k抽离          minChunks: 2,        // 被引用多少次以上抽离抽离          chunks: 'initial'    // 从什么地方开始, 从入口开始        }      }    }  },}

这些看懂，webpack就算基本入门了。