webpack入门一

webpack为何物

什么是webpack

webpack 是代码编译工具，有入口、出口、loader 和插件。webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。

为什么要使用webpack

首先，定义已经说明了 webpack 能将多个资源模块打包成一个或少数文件，这意味着与以往的发起多个 HTTP 请求来获得资源相比，现在只需要发起少量的 HTTP 请求。

其次，webpack 能将你的资源转换为最适合浏览器的“格式”，提升应用性能。比如只引用被应用使用的资源 (剔除未被使用的代码)，懒加载资源 (只在需要的时候才加载相应的资源)。再次，对于开发阶段，webpack 也提供了实时加载和热加载的功能，大大地节省了开发时间。除此之外，还有许多优秀之处之处值得去挖掘。不过，webpack 最核心的还是打包的功能。

一、webpack的安装（nodejs环境下）

1、安装webpack

本地安装(推荐)

npm install --save-dev webpack
npm install --save-dev webpack-cli

全局安装(不推荐)

npm i webpack -g

2、创建项目

准备文件

生成两个目录分别为dist目录和src目录和一个webpack.config.js文件 

dist和src中创建下图中的文件                                                                                      

分别定义两个js文件

执行webpack的第一个命令

npx webpack

这时候就成功打包了

二、处理css

css-loader ：处理css文件
style-loader ：把css插入到header
mini-css-extract-plugin ：把css抽取到单独文件
less less-loader ：处理less文件

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。Loader 可以理解为是模块和资源的转换器。

安装style-loader和 css-loader

npm install css-loader style-loader mini-css-extract-plugin 

在src文件夹创建style.css

body{
    background:pink;
}

在index.js 引入

import './css/style.css'

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports={ 
    optimization: {
        minimizer: [ new OptimizeCSSAssetsPlugin({})],
      },  
    mode:'production',
    entry:'./src/index.js',
    output:{
        filename:'main.js',
        path:__dirname+'/dist'
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[MiniCssExtractPlugin.loader,/* 'style-loader', */'css-loader']
            },
            {
                test:/\.less$/,
                use:[MiniCssExtractPlugin.loader,/* 'style-loader', */'css-loader','less-loader']
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        }),
        new MiniCssExtractPlugin({
            filename: 'style.css',
            
          }),
    ]
}

                                                                            

此时index.html的颜色就被修改了