Webpack基础 -＞（个人学习记录笔记）

news/2024/7/10 1:33:46 标签: vue, vue.js, js

文章目录

  • Webpack官网
    • 1. 认识webpack
    • 2. webpack的安装
    • 3. webpack的起步
    • 4. webpack的配置
    • 5. loader的使用
      • 5.1 css文件的处理
      • 5.2 less文件的处理
      • 5.3 图片文件的处理
      • 5.4. ES6转ES5的babel
    • 6. webpack中配置Vue
      • 未抽离app.vue
      • 抽离为app.vue
    • 7. plugin的使用
      • 7.1 添加版权的Plugin
      • 7.2 打包html的Plugin
      • 7.3 js压缩的Plugin
    • 8. 搭建本地服务器
      • 搭建服务器
      • 配置文件分离
        • dev.config.js
        • prod.config.js
        • base.config.js
      • package.json

Webpack官网

官网链接

1. 认识webpack

  • 一个线代的JavaScript应用的静态模块打包工具
    在这里插入图片描述

2. webpack的安装

管理员模式运行cmd

npm i -g webpack
npm i -g webpack-cli

在这里插入图片描述

3. webpack的起步

  • 打包 入口文件 -o 保存路径
  • webpack ./src/main.js -o ./dist/bundle.js

在这里插入图片描述
配置打包文件开发模式、生产模式

js">module.exports={
  // mode: 'production',
  mode: 'development',
}

js">//1. 使用commonjs模块化规范
const {add,mul} = require('./mathUtils')
console.log(add(20, 30));
console.log(mul(20, 30));

//2. 使用ES6的模块化的规范
import {name,age,height} from './info'
console.log(name);
console.log(age);
console.log(height);

js">//ES6导出
export const name = 'why';
export const age = 18;
export const height = 1.88;
  • mathUtils.js
js">function add(num1, num2) {
  return num1 + num2;
}

function mul(num1, num2) {
  return num1 * num2;
}

//commonjs导出
module.exports = {
  add,
  mul
}

4. webpack的配置

  1. 创建webpack.config.js
    js">const path = require('path')
module.exports={

  entry:'./src/main.js',    //入口
  output:{
    path: path.resolve(__dirname,'dist'), //动态获取绝对路径
    filename: 'bundle.js'
  },   //出口
  mode: 'development',//'production' 模式
}
  2. 输入命令，得到package.json文件
    scripts的脚本在执行时，查找命令的顺序为：
    先找本地的node_modules/.bin路径中对应的命令
    如果没找到,会去全局的环境变量中寻找
    npm init
    这里边的scripts，命令名:指令,之后用到npm run build
    devDependencies开发时依赖
    dependencies生产环境依赖
    json">{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.6.0"
  },
  "dependencies": {
    "webpack": "^3.6.0"
  }
}
    在终端或者cmd都是全局环境打包
    局部环境：在终端输入 ./node_modules/webpack执行
  3. npm install webpack@3.6.0 --save-dev
    --save-dev是开发时依赖，项目打包不需再使用

5. loader的使用

我们需要加载css、图片，也包括一些高级的将ES6转换成ES5代码，将TypeScript转换成ES5代码，将scss、less转成css，将.jsx、.vue文件转成.js文件等等
在这里插入图片描述

5.1 css文件的处理

  1. 通过npm安装需要使用的loader
    两个建议一起使用注意版本兼容
    npm install --save-dev css-loader@3.4.2
npm install --save-dev style-loader@1.1.3
  2. 在webpack.config.js中的modules关键字下进行配置
    入门文件依赖一下
    js">//依赖css文件
require('./css/normal.css')

    js">const path = require('path')
module.exports = {
  entry: './src/main.js',    //入口
  output: {
    path: path.resolve(__dirname, 'dist'), //动态获取路径
    filename: 'bundle.js'
  },   //出口
  module: {
    rules: [
      {
        test: /\.css$/i,
        //位置不能更改，底层是从右向左读取
        //css-loader只负责将css文件进行加载
        //style-loader负责将样式添加到DOM中
        use: ["style-loader", "css-loader"],
      },
    ],
  }
}

5.2 less文件的处理

  1. 通过npm安装需要使用的loader
    两个建议一起使用注意版本兼容
    npm install --save-dev less-loader@5.0.0
npm install --save-dev less@3.11.1
  2. 在webpack.config.js中的modules关键字下进行配置
    入门文件依赖一下
    js">//依赖less文件
require('./css/special.less')

    js">const path = require('path')
module.exports = {
  entry: './src/main.js',    //入口
  output: {
    path: path.resolve(__dirname, 'dist'), //动态获取路径
    filename: 'bundle.js'
  },   //出口
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/i,
        loader: [
          // compiles Less to CSS
          'style-loader',
          'css-loader',
          'less-loader',
        ],
      },
    ],
  },
}

5.3 图片文件的处理

  1. 通过npm安装需要使用的loader
    两个建议一起使用注意版本兼容

    npm install --save-dev file-loader@5.0.2
npm install --save-dev url-loader@3.0.0

  2. 在webpack.config.js中的modules关键字下进行配置
    入门文件依赖一下

    js">body {
    /*background-color: red;*/
    background: url("../img/1.jpg");
}

    publicPath:'dist/'防止找不到，index.html与不在dict文件夹时
    在这里插入图片描述

    name: 'img/[name].[hash:8].[ext]'
    img:文件要打包的文件夹
    name:获取原来的图片名，放在该位置
    hash:8:添加hash，保留8位
    ext: 使用图片原来的扩展名
    limit: 8192 限制大小8kb

    js">const path = require('path')
module.exports = {

  entry: './src/main.js',    //入口
  output: {
    path: path.resolve(__dirname, 'dist'), //动态获取路径
    filename: 'bundle.js',
    publicPath:'dist/'
  },   //出口
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              //当加载的图片，小于limit时，会将图片编译成base64字符串格式  单位 byte  8kb
              //当加载的图片，大于limit时，需要使用file-loader模块进行加载
              name: 'img/[name].[hash:8].[ext]'
              limit: 8192
              // limit: 30000
            }
          }
        ]
      },
    ],
  },
}

5.4. ES6转ES5的babel

  1. 安装
    npm install --save-dev babel-loader@8.0.6  @babel/core @babel/preset-env
  2. 在webpack.config.js中的modules关键字下进行配置
    入门文件依赖一下
    js">//依赖less文件
require('./css/special.less')

    js">const path = require('path')
module.exports = {
  entry: './src/main.js',    //入口
  output: {
    path: path.resolve(__dirname, 'dist'), //动态获取路径
    filename: 'bundle.js'
  },   //出口
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.js$/,
        // exclude:排除
        // include:包含
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'] 
          }
        }
      },
    ],
  },
}

6. webpack中配置Vue

vue_290">未抽离app.vue

  1. 引入vue.js

    npm install vue --save

  2. 写一些代码

    js">import Vue from 'vue';
new Vue({
  el: '#app',
  data:{
    message:'Hello Webpack!'
  }
})

    <div id="app">
  <h2>{{message}}</h2>
</div>

  3. 配置webpack.config.js
    runtime-only->代码中，不可以有任何的template
    runtime-compiler->代码中，可以有compiler可以用于编译template
    配置resolve，指定内容
    extensions:忽略文件扩展名可以直接引用名字app.js -> import app

    js">module.exports = {
  entry: './src/main.js',    //入口
  output: {
    path: path.resolve(__dirname, 'dist'), //动态获取路径
    filename: 'bundle.js',
    publicPath:'dist/'
  },   //出口
  resolve:{
   	extensions:['.js','.css','.vue'],
    //别名
    alias:{
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}

vue_336">抽离为app.vue

  1. 安装注意版本号^13.0.0
    npm install --save-dev vue-loader vue-template-compiler
  2. 配置
    js">const path = require('path')
module.exports = {
  entry: './src/main.js',    //入口
  output: {
    path: path.resolve(__dirname, 'dist'), //动态获取路径
    filename: 'bundle.js'
  },   //出口
  module: {
    rules: [
      {
        test: /\.vue$/,
        use:['vue-loader']
      },
    ],
  },
}

在这里插入图片描述

7. plugin的使用

loader转换器 ，plugin 扩展器
plugin 使用过程

  1. 通过npm安装需要使用的plugin
  2. 在webpack.config.js中的plugin中配置插件

7.1 添加版权的Plugin

插件名BannerPlugin,属于webpack自带的插件

js">const path = require('path')
var webpack = require('webpack');
module.exports = {
  entry: '', 
  output: {},  
  module: {},
  resolve:{},
  plugins:[
    new webpack.BannerPlugin('最终解释权规slience_me所有!')
  ],
}

在这里插入图片描述

7.2 打包html的Plugin

作用：

  1. 自动生成一个index.html文件
  2. 将打包的js文件，自动通过script标签插入到body

安装插件版本3.2.0

npm install html-webpack-plugin --save-dev

使用插件，修改webpack.config.js文件中的plugins部分的内容如下：

  1. 这里的template表示根据什么模板来生成index.html

  2. 另外，我们要删除之前在output中添加的publicPath属性

  3. 否则插入的script标签中的src可能出问题

    js">const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins:[
    new HtmlWebpackPlugin({
      template:'index.html'
    })
  ],

jsPlugin_409">7.3 js压缩的Plugin

安装插件版本^1.0.0

npm install uglifyjs-webpack-plugin --save-dev

js">const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');
plugins:[
    new UglifyjsWebpackPlugin()
  ]

8. 搭建本地服务器

搭建服务器

安装

npm install --save-dev webpack-dev-server@3.10.3

devserver也是作为webpack中的一个选项，选项本身可以设置如下属性

  • contentBase：为哪一个文件夹提供本地服务，默认是根文件夹，这里写./dist
  • port:端口号
  • inline：页面实时刷新
  • historyApiFallback：在SPA页面中，依赖HTML5的history模式
js">devServer:{
	contentBase: './dist',
	inline: true
},

js">"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server"
  },

配置文件分离

安装

npm install webpack-merge --save-dev

js_454">dev.config.js

js">const webpackMerge = require('webpack-merge');
const baseConfig = require('./base.config')
module.exports = webpackMerge.merge(baseConfig,{
  mode:'development',
  devServer:{
    contentBase: './dist',
    inline: true
  }
})

js_468">prod.config.js

js">const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');
const webpackMerge = require('webpack-merge');
const baseConfig = require('./base.config')
module.exports = webpackMerge.merge(baseConfig,{
  mode:'production',
  plugins:[
    new UglifyjsWebpackPlugin()
  ]
})

js_482">base.config.js

js">const path = require('path')
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './src/main.js',    //入口
  output: {
    path: path.resolve(__dirname, '../dist'), //动态获取路径
    filename: 'bundle.js',
    // publicPath:'dist/'
  },   //出口
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/i,
        loader: [
          // compiles Less to CSS
          'style-loader',
          'css-loader',
          'less-loader',
        ],
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              //当加载的图片，小于limit时，会将图片编译成base64字符串格式  单位 byte
              //当加载的图片，大于limit时，需要使用file-loader模块进行加载
              limit: 8192,
              name: 'img/[name].[hash:8].[ext]'
              // limit: 30000
            }
          }
        ]
      },
      {
        test: /\.js$/,
        // exclude:排除
        // include:包含
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.vue$/,
        use:['vue-loader']
      }
    ],
  },
  resolve:{
    extensions:['.js','.css','.vue'],
    //别名
    alias:{
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  plugins:[
    new webpack.BannerPlugin('最终解释权规slience_me所有!'),
    new HtmlWebpackPlugin({
      template:'index.html'
    })
  ]
}

json_559">package.json

js">"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config build/prod.config.js",
"dev": "webpack-dev-server --open --config ./build/dev.config.js"
},

http://www.niftyadmin.cn/n/1459891.html

相关文章

学习日志day56（2021-09-26）（1、高级查询 2、分页插件 3、Mybatis使用注解 ）

学习日志day56（2021-09-26）（1、高级查询 2、分页插件 3、Mybatis使用注解 ）

学习内容&#xff1a;学习MyBatis框架&#xff08;Day56&#xff09; 1、高级查询 2、分页插件 3、Mybatis使用注解 1、高级查询 &#xff08;1&#xff09;Mybatis作为一个ORM框架&#xff0c;也对SQL的高级查询做了支持&#xff0c;即Mybatis下的一对一、一对多、多对多的查…
阅读更多...
用python画爱心写一句话_python中用turtle画爱心表白

用python画爱心写一句话_python中用turtle画爱心表白

python中用turtle画爱心表白python 运行后的效果图&#xff1a;ide下面的代码是在python3.7写的&#xff0c;代码有点长&#xff0c;但却语法简单易懂动画 代码以下&#xff1a;orm import turtle str input(请输入表白语&#xff1a;) turtle.speed(10)#画笔速度 turtle.setu…
阅读更多...
学习日志day57（2021-09-28）（1、mybatis和spring整合 2、搭建ssm框架）

学习日志day57（2021-09-28）（1、mybatis和spring整合 2、搭建ssm框架）

学习内容&#xff1a;学习MyBatis框架&#xff08;Day57&#xff09; 1、mybatis和spring整合 2、搭建ssm框架 1、mybatis和spring整合 &#xff08;1&#xff09;创建spring的配置文件applicationContext.xml <?xml version"1.0" encoding"UTF-8"?…
阅读更多...
vbox 中ubuntu20.04和宿主机共享文件_嵌入式杂谈之文件系统

vbox 中ubuntu20.04和宿主机共享文件_嵌入式杂谈之文件系统

文件系统可以说是嵌入式中的一大块&#xff0c;也是绕不过的一部分。之前我对文件系统认知一直停留在在U盘格式的理解上&#xff0c;直到接触了嵌入式Linux才发现这里面大有文章&#xff0c;以Linux启动挂载根文件系统为例&#xff0c;这个文件系统可以是真正的存储设备上的文件…
阅读更多...
anaconda新建环境_Jupyter Notebook中切换conda虚拟环境

anaconda新建环境_Jupyter Notebook中切换conda虚拟环境

Jupyter Notebook本身是默认使用一种Anaconda中root目录下的Python环境的&#xff0c;如果想使用其它的虚拟环境&#xff0c;还需要通过插件来实现&#xff0c;也就是nb_conda插件。一、安装插件通过下面命令安装插件&#xff1a;conda 安装完成后&#xff0c;jupyter notebook…
阅读更多...
学习日志day58（2021-10-09）（1、SVN 2、Git）

学习日志day58（2021-10-09）（1、SVN 2、Git）

学习内容&#xff1a;学习版本控制系统SVN和Git&#xff08;Day58&#xff09; 1、SVN 2、Git 1、SVN &#xff08;1&#xff09;SVN全名Subversion&#xff0c;即版本控制系统。SVN与CVS一样&#xff0c;是一个跨平台的软件&#xff0c;支持大多数常见的操作系统。 作为一个…
阅读更多...
Vue CLI vue-router -＞（个人学习记录笔记）

Vue CLI vue-router -＞（个人学习记录笔记）

文章目录Vue1. vue-vli脚手架1.1 介绍与安装1.2 项目初始化2. 回顾箭头函数2.1 基本使用2.2 参数和返回值2.3 this指向3. 路由3.1 vue-router安装与配置3.2 vue-router基本使用基本使用router-linkrouter-view重定向修改路由模式hash->history不用router-link3.3 vue-router…
阅读更多...
学习日志day59（2021-10-11）（1、添加远程仓库 2、分支管理）

学习日志day59（2021-10-11）（1、添加远程仓库 2、分支管理）

学习内容&#xff1a;学习版本控制系统Git&#xff08;Day59&#xff09; 1、添加远程仓库 2、分支管理 1、添加远程仓库 &#xff08;1&#xff09;添加远程库 如果想让其他人来协作开发&#xff0c;就可以把本地仓库同步到远程仓库&#xff0c;同时还增加了本地仓库的一个备…
阅读更多...
最新文章

Copyright @ 2022~2023