IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> Webpack -> 正文阅读

[JavaScript知识库]Webpack

一、webpack五个核心概念?

1.Entry

入口(Entry)指示 webpack 以哪个文件为入口起点开始打包

2.Output

输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去,以及如何命名

3.Loader

Loader 让 webpack 能 够 去 处 理 那 些 非 JavaScript 文 件 (webpack 自 身 只 理 解 JavaScript)

4.Plugins

插件(Plugins)可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩, 一直到重新定义环境中的变量等。

5.Mode

模式(Mode)指示 webpack 使用相应模式的配置

二、初始化配置

1.初始化package.json输入指令:npm init

2.下载并安装webpack??

npm install webpack webpack-cli -g

npm install webpack webpack-cli -D

npm install webpack webpack-cli -S

初体验

1. webpack能处理js/json资源,不能处理css/img等其他资源
2. 生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化~
3. 生产环境比开发环境多一个压缩js代码。

webpack.config

// resolve用来拼接绝对路径的方法
const { resolve } = require('path');

module.exports = {
  // webpack配置
  // 入口起点
  entry: './src/index.js',
  // 输出
  output: {
  // 输出路径
  // __dirname nodejs的变量,代表当前文件的目录绝对路径
  path: resolve(__dirname, 'build')
  // 输出文件名
  filename: 'bundle.js',
  // 只要是涉及url的东西,都会在路径前面拼接'dist/'
  publicPath:'dist/'
 },
  // loader的配置
  module: {
    rules: [
    // 详细loader配置
    // 不同文件必须配置不同loader处理
    {
      // 匹配哪些文件
      test: /\.css$/,
      // 使用哪些loader进行处理
      use: [
        // use数组中loader执行顺序:从右到左,从下到上 依次执行
        // 创建style标签,将js中的样式资源插入进行,添加到head中生效
        'style-loader',
        // 将css文件变成commonjs模块加载js中,里面内容是样式字符串
        'css-loader'
       ]
     },
     {
      test: /\.less$/,
      use: [
        'style-loader',
        'css-loader',
        // 将less文件编译成css文件
        // 需要下载 less-loader和less
        'less-loader'
       ]
     },
     {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            //安装url-loader和file-loader
            loader: 'url-loader',
            options: {
              // 当加载的图片,大小小于limit时,会将图片编译成base64字符串格式
              // 当加载的图片,大小大于limit时,需要使用file-loader模块进行加载
              limit: 8*1024,
              // 给图片进行重命名
              // [hash:8]取图片的hash的前8位
              name:'img/[name].[hash:8].[ext]'
            },
            
          }
        ]
      },
      {
        test: /\.html$/,
        // 处理 html 文件的 img 图片(负责引入 img,从而能被 url-loader 进行处理)
        loader: 'html-loader'
      }
   ]
 },
// plugins的配置
plugins: [
  // 详细plugins的配置
],
  // 模式
  mode: 'development', // 开发模式
  // mode: 'production'
}
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  }

在终端里使用npm rum build或者npm run server用的都是本地的webpack(前提配置上述代码),内部其实找的是(./node_modules/webpack)这个目录,没找到就去全局找。不配置的话,用./node_modules/webpack,这也是本地的。直接用webpack,则用的是全局的

打包的时候,main.js依赖什么就会打包什么。写的normal.css样式文件,打包的话:main.js需要引入require('./css/normal.css'),loader的配置参考上面代码或者访问:https://www.webpackjs.com/loaders/

配置图片

参考上述配置,结果如下:

babel-loader:es6es5

npm install -D? babel-loader babel-core babel-preset-es2015

配置webpack.

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

webpack结合vue使用

npm i vue-loader vue-template-compiler -D

//配置中添加
{
  test:/\.vue$/,
  use:['vue-loader']
}

plugin插件

//webpack.config.js配置
const webpack=require('webpack')    //版权需要引入webpack

const HtmlWebpackPlugin=require('html-webpack-plugin')    
/*自动生成html文件,需要安装 html-webpack-plugin包*/

const UglifyjsWebpackPlugin=require('uglifyjs-webpack-plugin')  //需要安装这个包
...
...
plugins:[
    new webpack.BannerPlugin('最终版权归潇洒所有'),
    new HtmlWebpackPlugin({
      template:'index.html'    //根据此模板生成html文件
    }),
    // 压缩丑化bundle.js 不过注释会被忽略掉
    new UglifyjsWebpackPlugin()    
  ]

搭建本地服务器

npm i webpack-dev-server -D? ? ?注意版本问题

//webpack.config.js配置
module.exports = {
     devServer:{
       contentBase:'./dist',  //为dist文件夹提供本地服务,默认根文件夹
       inline:true  //是否页面实时刷新
    }
}
//package.json配置
"scripts": {
    ...
    ...
    "dev":"webpack-dev-server --open"    //--open:自动打开网页
  }
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-09-09 11:39:18  更:2021-09-09 11:39:42 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年12日历 -2024/12/27 20:20:19-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码
数据统计