Webpack

Webpack

定义:前端静态模块打包工具

一、前端模块化

1.1前端模块化方案:AMD、CMD、CommonJS、ES6

1.2在ES6之前,如果想要进行模块化开发,就必须借助其他工具,并且在模块化开发完成项目后需要处理每个模块之间的依赖关系,并将其整合打包

1.3webpack核心就是让我们进行模块化开发,并且会帮助处理模块之间的依赖关系

1.4不仅仅时JS文件,CSS、img、json文件等都会被当作模块化使用

二、安装

2.1webpack为了可以正常运行,依赖node环境

2.2node环境为了可以正常执行很多代码,必须其中包含各种依赖的包

2.3node内部有npm工具,负责安装各种各样的包

// 1.检测node版本
node -v

// 2.全局安装webpack
npm install webpack@3.6.0 -g

三、基本使用

3.1文件夹src和打包文件夹dist

3.2src文件夹中需要一个main.js作为入口

3.3dist文件夹中有一个bundle.js的打包文件

3.4终端写法:webpack ./src/main.js ./dist/bundle.js--从main.js打包到bundle.js

3.5index.html只需要引入打包好的bundle.js即可

// CommonJS结合webpack

// math.js导出
function add(a, b) {
    return a + b;
};
function mul(a, b) {
    return a * b;
};
// 导出
module.exports = {
    add,
    mul
};

// main.js导入
const { add, mul } = require("./math.js");
// ES6结合webpack

// info.js导出
const name = "yg";
const age = 25;
const height = 1.93;
// 导出
export {name, age, height};

// main.js导入
import {name, age, height} from "./info.js";

四、配置

智能配置入口和出口文件

4.1新建文件名称:webpack.config.js

4.2通过CommonJS导出指定入口和出口

module.exports = {
    entry: "入口文件",
    output: "出口文件"
}
// 1.导入path
const path = require("path");

// 2.执行npm init初始化,会自动安装配置好package.json

// 3.通过npm install可以安装依赖文件,会多一个package-lock.json

// 4.在package.json脚本文件里写入"build": "webpack",可以执行npm run build进行打包,这里默认是全局的webpack

// 5.安装本地webpack:npm install webpack@3.6.0 --save-dev(表示开发时依赖,打包前需要,之后不需要),在package.json中会多一个devDependencies,多一个node_modules文件夹

// 6.只要在终端写的webpack都是运行的全局的,在package.json中的webpack是本地的
// 通过CommonJS导出
module.exports = {
  // 入口
  entry: "./src/main.js",
  // 出口
  output: {
    // 路径拼接调用path的resolve方法:第一个参数是__dirname,第二个参数是出口文件夹名
    path: path.resolve(__dirname, "dist"),
    // 出口文件名
    filename: "bundle.js",
    // 涉及任何url都会在前面拼接dist
    publicPath: "dist/"
  }
}

五、loader

webpack的核心概念loader

5.1通过npm安装需要使用的loader

5.2在webpack.config.js中的module关键字进行配置

5.3--save-dev表示只有开发时依赖;--save表示运行时依赖

css-loader/style-loader

// main.js引入依赖其他css文件
require("./css/base.css"); // CommonJS
import "./css/base.css";  // ES6

// 安装css-loader
npm install --save-dev css-loader@2.0.2
//安装style-loader
npm install --save-dev style-loader@0.23.1

// 配置
{
  // css-loader只负责文件加载
  // style-loader负责将样式添加到dom
  // 使用多个loader从右向左读取
  test: /\.css$/i,
  use: ["style-loader", "css-loader"],
},

less-loader:针对less样式

// 安装
npm install less less-loader@4.1.0 --save-dev

// 配置
{
  test: /\.less$/i,
  loader: [
    // compiles Less to CSS
    'style-loader',
    'css-loader',
    'less-loader',
  ],
},

url-loader/file-loader:针对图片问题

// 安装
npm install --save-dev url-loader@1.1.2
npm install --save-dev file-loader@3.0.1

// 配置
{
  test: /\.(png|jpg|gif|jpeg)$/i,
  use: [
    {
      loader: 'url-loader',
      options: {
        // 当加载图片小于limit时,会将图片编译成base64形式
        // 当加载图片大于limit时,需要安装file-loader@3.0.1
        limit: 8192,
        // 对打包好的图片进行规范化命名
        // img文件夹下的[动态初始名][动态哈希值8位][动态后缀名],用点连接
        name: "img/[name].[hash:8].[ext]"
      },
    },
  ],
},
  
// 图片未显示是因为路径报错,需要在outoput位置配置公共路由
publicPath: "dist/"

babel-loader::针对ES6语法转换为ES5

// 安装
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

// 配置
{
  test: /\.m?js$/,
  // 排除
  exclude: /(node_modules|bower_components)/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['es2015']
    }
  }
}

六、引用VUE

// 安装
npm install --save vue@2.5.12
npm install --save-dev vue-loader@14.2.2 vue-template-compiler@2.5.12

七、插件plugins[数组类型]

7.1版权声明插件

// 自带插件,不需要安装

// 导入webpack
const webpack = require("webpack");

// 使用
new webpack.BannerPlugin("最终版权归coderyg所有"),

7.2打包html的插件

作用:

7.2.1.1自动生成一个index.html文件;

7.2.1.2将打包的js文件,自动通过script标签插入到body中

注意:

7.2.2.1template表示根据什么模板来生成html;

7.2.2.2需要删除publicPath属性,否则插入的script标签中的src可能会有问题

// 安装
npm install --save-dev html-webpack-plugin@3.2.0

// 导入
const HtmlWebpackPlugin = require("html-webpack-plugin");

// 使用
new HtmlWebpackPlugin({
  // 根据index.html为模板生成
  template: "index.html"
}),

7.3压缩丑化插件

// 安装
npm install --save-dev uglifyjs-webpack-plugin@1.1.1

// 导入
const uglifyJsPlugin = require("uglifyjs-webpack-plugin");

// 使用
new uglifyJsPlugin()

八、搭建本地服务器

// 安装
npm install --save-dev webpack-dev-server@2.9.1

// 设置
// webpack.config.js配置
devServer: {
    // 为哪个文件夹提供服务,默认是根文件夹
    contentBase: "./dist"
    // 端口号
    prot: ""
    // 页面实时刷新
    inline: true
    // 在SPA页面中,依赖HTML5的history模式
    historyApiFallback: ""
}
// package.json配置
"dev": "webpack-dev-server --open"

// 使用
npm run dev
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容