webpack打包

概念：

webpack是一种用于前端项目自动构建发布工具

自动构建的工作包括：兼容性处理，语法性处理，合并，打包，压缩，优化等等。。

比较适合单页面应用，项目的结构也需要复合webpack的要求

webpack 要求项目需要有两个文件，一个是入口文件，一个是webpack，config.js（是一个node.js） 默认情况下有一个src目录用于存放源代码，项目打包好以后还有一个构建目录默认是叫build

工作流程简介：

1.根据入口文件，梳理各个文件之间的依赖关系，把相关的同类型文件打包成chunk块，比如所有js文件打包成一个js块

2.对每个块进行兼容性，语法转换等处理。

3.进行打包，压缩，优化等工作

4.输出打包好的文件

npm install -g cnpm --registry=https://registry.npmmirror.com

国内的镜像包管理服务器，执行安装

二。webpack五个核心的概念(配置)

entry：配置入口文件的路径和名称

output：配置打包之后的文件，存放到那个目录里面

module：用于配置完成语法糖之后兼容转换等问题的加载器

(loader),默认支持js和json文件，这两个文件处理不需要加载器

plugins:插件，用于完成打包压缩优化等工作

mode: 模式，开发默认(development)和产品模式(production),

开发模式下不需要进行打包压缩优化等工作提升开发的效率，产品模式下就需要全部工作都做完。

基础配置：

let path = require('path');
module.exports = {
    //指定入口文件
    entry:path.resolve('src','index.js'),
    //指定输出目录
    output:{
        //打包生成的文件
        filename:'bulid.js',
        //输出目录
        path:path.resolve('bulid')
    },
    //加载器，处理兼容性转换问题 
    module:{},
    //插件，处理打包压缩优化问题
    plugins:[],
    mode:'development'
}

三.css和css预处理文件处理

安装 npm i -D css-loader style-loader less less-loader

加载器配置：

 

入口文件写法

import goods from './index.json'
import './index.css'
import './index.less'
console.log("第一个webpack下项目");
console.log(goods)

项目结构: 

 

 打包完成后，src所有文件会被合并处理为一个bulid.js文件

四。图片处理

 安装:

npm i -D html-webpack-plugin file-loader url-loader html-loader