构建工具Webpack笔记一

Webpack笔记一

1.webpack简介

      Webpack是一种前端资源构建工具,一个静态模块打包器(module bundler)
         在Webpack看来,前端的所有资源文件(js/json/css/less/img...)都会作为模块处理
         它将根据模块间的依赖关系进行静态分析,打包生成对应的静态资源(bundle)

2.Webpack五个核心概念

         1.Entry   入口
             -Entry指示Webpack以哪个文件为入口起点开始打包,分析构建内部依赖图
         2.Output  输出
             -Output指示Webpack将打包后的静态资源bundles输出到哪里,以及如何命名
         3.Loader
             -Loader让Webpack去处理那些非Javascript文件(Webpack能理解的JavaScript)
         4.Plugins 插件
             -Plugins可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量等
         5.Mode    模式
             -Mode 指示webapck使用相应模式的设置,分两种:development/production

3.Webpack初体验

打开终端,输入指令:

1. npm init

回车，设置package name为webpack_test，回车
全局安装

2. npm i webpack webpack-cli -g 

本地安装

3. npm i webpack webpack-cli -D

1.在02.webpack初体验文件夹下新建文件夹src与build
在src下新建文件index.js做为入口文件

 1.运行指令
    开发环境:webpack ./src/index.js -o ./build/built.js --mode=development
           含义: webpack会以  ./src/index.js为入口文件开始打包,打包后输出到./build.built.js,整体的打包环境是开发环境
    运行环境:webpack ./src/index.js -o ./build/built.js --mode=production
           含义: webpack会以  ./src/index.js为入口文件开始打包,打包后输出到./build.built.js,整体的打包环境是生产环境
 2.结论:
     1.webpack能处理js/json资源,不能处理css/img等其他资源
     2.生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化
     3.生产环境比开发环境多一个压缩js代码

function add(a,b){
   
    return a+b;
}
console.log(add(2,3));

如果出现无法加载文件，此系统禁止运行脚本的情况
电脑搜索框->输入windows Powershell ->右键以管理员的身份运行

//设置权限
set-ExecutionPolicy RemoteSigned

输入 Y 确定回车

//查询当前状态
get-ExecutionPolicy

出现RemoteSigned即可

4.打包样式资源

// webpack.config.js  webpack的配置文件
// 作用:指示webpack干哪些活(当运行webpack指令时,会加载里面的配置)
// 所有的构建工具都是基于node.js平台运行的,模块化的话默认采用commonjs


// resolve用来拼接绝对路径的方法
const {
    resolve } = require('path');
module.exports = {
   
    // webpack配置
    // 1.入口起点
    entry: './src/index.js',

    // 2.输出
    ouput: {
   
        // 输出文件名
        filename: 'built.js',
        // 输出路径
        // __dirname  属于nodejs变量,代表当前文件目录的绝对路径
        path: resolve(__dirname, 'build')
    },

    //  3.loader的配置
    module: {
   
        rules: [{
   
            // 详细的loader配置
            // 不同文件必须配置不同的loader处理
            //1. 匹配哪些文件
            test: /.\css$/,
            // 2.使用哪些loader进行处理