webpack 打包流程

安装nodejs 之后

找到文件目录 

npm init

运行 安装 webpack依赖包

全局安装webpack

npm i webpack webpack-cli -g

继续安装webpack 到本地  开发环境依赖

npm i webpack webpack-cli -D

新增index.js 入口文件

import './css/reset.css';
import './css/main.css';
import $ from 'jquery'

新建一个webpack.config.js

webpack配置文件，运行webpack 指令的时候，加载里面的配置

1.处理css样式  style-loader,和css-loader

npm i style-loader css-loader -d //下载依赖包

2.处理背景图片 

url-loader

npm i  url-loader -d

3.处理img图片

下载html-loader依赖包

npm i  html-loader -d

4.下载html-webpack-plugin依赖包

npm i html-webpack-plugin -d
const HtmlWebpackPlugin = require('html-webpack-plugin');//引入包
调用new HtmlWebpackPlugin({
            //复制'./src/index.html'文件，自动引入打包输出的所有资源
            template: './src/index.html'
        })

const {
    resolve
} = require('path') //resolve 用来拼接绝对路径的方法
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    //webpck配置
    //入口起点
    entry: './src/index.js',
    //输出
    output: {
        //输出文件名
        filename: 'built.js',
        //输出路径
        //__dirname nodejs的变量 代表当前文件的绝对路径
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            //详细的loder配置
            {
                test: /\.css$/,
                //
                use: [
                    //use数组中loader执行顺序，从左到右，从下到上，一次执行
                    //创建style标签，将js中的样式资源插入进行，添加到head中生效
                    'style-loader',
                    //将css文件变成commonjs模块加载js中，里面的内容是样式字符串
                    'css-loader'
                ]
            },
            {
                test: /\.(jpg|png|gif)$/,
                //处理不了html中的图片
                //使用一个loader
                loader: 'url-loader'
                //下载url-loader file-loader
            },
			{
				  test: /\.html$/,
				  use:{
					   loader: 'html-loader',
				  }

			}
        ]
    },
    plugins: [
        //详细plugins的配置
        //html-webpack-plugin
        //功能：创建一个空的html，自动引入打包输出的所有资源
        new HtmlWebpackPlugin({
            //复制'./src/index.html'文件，自动引入打包输出的所有资源
            template: './src/index.html'
        })
    ],
    //模式
    mode: 'development', //开发模式
    //mode: 'production',//生产模式

}