webpack使用

webpack是一个打包项目构建工具gulp 基于任务，而webpack 基于模块化处理的（监听文件的变化来重新编译）

在webpack中 所有文件都会被他视为模块

当你使用import 或者 require 导入一个文件时导入的那个文件就会被它视为模块

虽然说每一个文件都会被当做模块来处理 需要我们定义相对于后缀名称的文件格式 定制不同的处理器来处理

webpack需要使用全局安装

npm i -g webpack
npm i -g webpack-cli
webpack -v
4.17.2

创建项目
- src 目录
   - main.js
- package.json
- webpack.config.js

loader （模块处理器）

1.css处理

style-loader// 就是把webpack处理好的样式变成一个js脚本当运行的候把js脚本的代码添加到dom中
css-loader
// 就是把css 文件处理成一个字符串

配置

rules: [ // 模块处理规则
    {
        test: /\.css$/, //正则
        loader: ['style-loader', 'css-loader']
    }
]
// 当webpack 发现有后缀名称为css 的导入模块时
// 就会使用我们安装的 'style-loader', 'css-loader' 来处理

2.less处理

less
less-loader

3.vue文件处理

vue-loader
webpack
vue-template-compiler

4.js文件处理 （兼容性）

babel-core 
babel-loader
webpack-dev-server//就是一个开发版的服务器 自动热更新代码
html-webpack-plugi
npm i -g webpack-dev-server

html-webpack-plugin

概念
入口
程序的入口（它不直接运行代码。它负责解析和编译代码，运行代码的地方是浏览器）

module.exports = {//暴露一个对象出去，webpack去读
        entry: __dirname + "/main.js", //唯一入口文件，__dirname是nodejs的一个全局变量，它指向当前执行脚本所在的目录（全路径，计算机绝对路径）
        output: {
            path: __dirname + "/public",//指定打包输出的目录(自动生成)
            filename: "bundle.js"//指定打包输出的文件名称
        },
        //生成source-map供浏览器去读，映射源文件分离展示方便调试,用'#source-map'也可以
        devtool: "#cheap-module-eval-source-map",
        //配置loader来处理文件
        module: {
            rules: [{//一个loader的具体配置
                test: /\.scss$/,//匹配的文件类型
                use: [{//loader处理的顺序是该数组中从右到左的顺序
                    loader: 'style-loader'//将 JS 字符串生成为 style 节点
                },{
                    loader: 'css-loader'//将 CSS 转化成 CommonJS 模块
                },{
                    loader: 'sass-loader'//将sass编译成css
                }]
            },{
                test: /\.(png|jpeg)$/,
                use: [{
                    loader: 'url-loader',
                    options: {//配置额外参数
                        limit: 1024, //限制转base64的图片为1k(1024b)，超过1k的以url返回,设置此项需要安装依赖：file-loader，会将图片传到public下
                        outputPath: 'img/' //指定输出路径：放到public下的img文件下，如果没有则会自动新建,并且路片路径自动变成img/***.***
                    }
                }]
            }]
        }
}

被webpack编译它不是被nodejs运行
编译出来的js 文件放入到html里运行

导入导出

webpack的编译机制和node的运行机制是一样的每一个文件都是一个模块 （需要像node一样导入导出使用了）在webpack里的导入导出 使用的是es6的语法规则当然兼容nodejsnodejs 里内置模块不能使用npm下载的第三方模块可以使用（但是该模块中不能包含nodejs的内置模块）

node的导入方式
const test = require('./test.js')
console.log(test)
es6的导入方式 默认导出的内容使用方式
import test from './test.js'
单独导出的使用方式
如果导入的模块使用了export 导出在导入时使用解构的方式导入
import { a, b } from './test.js'

可以把上面两条语句合并在一起
单独导出和默认导出的混合使用方式
import test, { a, b} from './test.js'

es6 还提供了一个全导入方法
import * as x from './test.js'
* as x 的意思是把 test.js里 默认导出和单独导出的合并在一起放到变量x里
console.log(x)
const a = 'ccc'
import { a as c , b } from './test.js'
如果单独导出的变量 和当前模块已有的变量发生冲突 可以使用别名(as)来解决
aasc 这里的as 是把a的变量名称改成c 来运行
console.log(a, c)
如果导出使用的是 es6模块语法 这里的node导入 
使用的就是 import * as的语法
const test = require('./test')
console.log(test)
es6导出的 必须是默认导出 和单独导出进行分离使用的
console.log(test ,a, b)
function.module.exports = {
     a: 100
 }
 exports.run = function() {
    console.log(1)
 }
// 在node里 exports 导出会被 module.exports 覆盖
// es6
// export default 可以不用写函数名称 类名称 变量名称都可以省略
// 在es6里和nodejs 机制不同 单独淡出和默认导出是分开的
// 默认导出
// 对应node语法 module.exports
export default function() {
    return 100
}
// 对应node语法 exports.a = 100
export const a = 100
// 对应node语法 exports.b = function(){}
export function b() {
}