webpack模块化打包工具

前言 ： 增加印象，留下脚印 ，忘记还可以翻一翻 奥利给。

为什么要打包？

1, 前端写代码时为了方便会将代码写在许多文件中，但是转化成HTML代码时，会使用<script>标签进行引入js代码，这样会使页面进行的http衍生请求次数的次数增多，页面加载耗能增加。
2, 使用打包过后将许多零碎的文件打包成一个整体，页面只需请求一次，js文件中使用模块化互相引用（export、import ），这样能在一定程度上提供页面渲染效率。
3 ,浏览器无法识别.less .vue .sass 等一些后缀文件，低版本浏览器无法运行es6语法，打包同时会进行编译，以兼容高版本的浏览器。

什么是模块化？（之前博客有写）
模块化详解

现在正是让我们一起学习吧
先上官方文档，中文版很详细 webpack 中文版它基于node npm 所以大家先安装一下node环境 node里面自带npm工具 大家如果用npm工具下载慢的话 可以用阿里的镜像 cnpm
终端下安装cnpm命令

npm install -g cnpm --registry=https://registry.npm.taobao.org

查看一下安装是否成功

cnpm -v

webpack官网里面安装步骤很详细 ，官方建议我们本地安装 我们就本地安装。大家安装完就可以去试一试了

目录结构

dist 里面是你打包好的东西
src 里面是你自己写的一些文件
我们将src里面的 css less js ipg 打包到dist吧

index.js

// commonjs模块化规范  commonjs模块需要webpack解析才能用
//导入
const {add, mul} = require('./math')

console.log(add(20, 30));
console.log(mul(20, 30));

// 2.使用ES6的模块化的规范  有没有webpack他都可以被大部分浏览器识别
//导入
import {name, age, height} from "./info";

console.log(name);
console.log(age);
console.log(height)


  require('./style.css') //css依赖
  require('./special.less')//less依赖
  document.writeln('<h2>你好</h2>')

info.js

//es6导出
export const name = 'why';
export const age = 18;
export const height = 1.88;

math.js

function add(num1, num2) {
    return num1 + num2
  }
  
  function mul(num1, num2) {
    return num1 * num2
  }
 //  commonjs导出
  module.exports = {
    add,
    mul
  }

css 和 less
简单写一写效果就好了

webpack的配置
大家先去官网上查看文档，下载相应的loader 终端npm下载 package.json 里面有版本号
之后在这里配置
webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',   //入口
  output: {                 //出口
    filename: 'bundle.js',   
    path: path.resolve(__dirname, 'dist')
  },
  module: {
         rules: [
           {
             test: /\.css$/, //css - loader
             use: [
               'style-loader',
               'css-loader'
             ]
           },
           {
            test: /\.less$/,  //less - loader
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "less-loader" // compiles Less to CSS
            }]
        },
        {
                     test: /\.(png|svg|jpg|gif)$/, //image - loader
                     use: [
                       'file-loader'
                     ]
                   }
         ]
       }
};

package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"  //npm run build命令代替
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^3.6.0",  下载后自动生成的版本
    "file-loader": "^6.0.0",
    "less": "^3.12.2",
    "less-loader": "^6.2.0",
    "style-loader": "^1.2.1",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12"
  },
  "dependencies": {
    "lodash": "^4.17.19"
  }
}

npm run build 一下 点击 index.html 就跑起来了
index.html<script src="bundle.js"></script>

本人QQ：1485731520