学习笔记--Webpack

2023-11-09 01:12•Java教程•阅读 2549

一、Webpack基本使用--安装和配置

① 新建一个空目录并进入该目录，执行命令 npm init -y 来初始化 package.json 包管理配置文件.

② 执行命令 npm install webpack webpack-cli -D 来安装相关包

③ 在项目根目录中创建名为 webpack.config.js 的配置文件，该配置文件初始化内容如下：

// webpack.config.js

module.exports={
    mode: 'development' //开发模式 development, 生产模式 production
}

④在 package.json 配置文件中的 scripts 节点中，增加dev脚本如下:

  "scripts": {
    "dev" : "webpack" 
  },

⑤ 在根目录下新建一个src的目录，同时在该目录下创建一个 index.js 的文件，文件内容可以为空

⑥ 在终端运行 npm run dev 命令，启动webpack进行项目打包.

二、Webpack基本使用--配置打包的入口与出口

// webpack.config.js
const path = require('path')    //导入node.js中操作路径的模块

module.exports={
    mode: 'development', //开发模式 development, 生产模式 production

    entry: path.join(__dirname,'src/index.js'),    //打包入口文件路径

    output:{
        path: path.join(__dirname,'dist'),        //输出文件的路径
        filename: 'bundle.js'                     //输出文件的名称
    }
}

三、Webpack基本使用--配置自动打包

　　① 执行命令 npm install webpack-dev-server -D

② 在 package.json 配置文件中的 scripts 节点中，修改dev脚本如下:

  "scripts": {
    "dev" : "webpack-dev-server" 
  },

③ 在src目录下新建一个index.html文件，index.html文件中引入 <script src="/bundle.js"></script>

该bundle.js文件是看不见的，它是在内存中的文件.

④ 在终端运行 npm run dev 命令，启动webpack进行项目自动打包.

⑤若访问链接 http://localhost:8080/ 报错 Cannot GET / ，则需要在 webpack.config.js中增加devServer的如下配置内容：

// webpack.config.js
const path = require('path')    //导入node.js中操作路径的模块

module.exports={

    mode: 'development', //开发模式 development, 生产模式 production

    entry: path.join(__dirname,'src/index.js'),    //打包入口文件路径

    output:{
        path: path.join(__dirname,'dist'),        //输出文件的路径
        filename: 'bundle.js'                       //输出文件的名称
    },

     // webpack4.0版本不需要加，webpack5.0版本必须加才行
    devServer: {
        static: {
          directory: path.join(__dirname, "/"),
        },
      }
    
}

四、Webpack基本使用--配置html-webpack-plugin生成预览页面

　　① 执行命令 npm install html-webpack-plugin -D 安装生成预览页面的插件

② 修改 webpack.config.js 的配置文件，在该文件的头部区域添加如下内容：

③ 修改 webpack.config.js 的配置文件, 在module.exports里面增加 plugins的配置

// webpack.config.js
const path = require('path')    //导入node.js中操作路径的模块

const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({  //创建插件的实例对象
    template: 'src/index.html',     //指定要用到的模板文件，即要复制的首页文件
    filename: 'index.html'          //指定生成的文件名称，该文件存在于内存中
})

module.exports={

    ...忽略其它内容...

plugins: [htmlPlugin] //plugins数组是webpack打包用到的一些插件列表

④ 在终端运行 npm run dev 命令，启动webpack进行项目自动打包

五、Webpack基本使用--配置自动打包相关参数

　　① 在package.json文件的 script 中

② --open 表示自动打开浏览器 --host 配置IP --port 配置端口

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 8288 --host 127.0.0.1 "
  },

③ 在终端运行 npm run dev 命令，启动webpack进行项目自动打包

六、Webpack基本使用--通过loader打包非js模块

　　在实际开发中，webpack默认只能打包以.js结尾的模块，其它非.js的模块无能为力，此时需要调用loader加载器才能正常打包

　　loader加载器可以协助webpack打包处理特定的文件模块。

处理css结尾的文件

① 执行命令 npm install style-loader css-loader -D 安装加载器

② 修改 webpack.config.js 的配置文件，在module.exports里面增加 module 的配置

// webpack.config.js
...忽略其它内容

module.exports={
     ...忽略其它内容
    module:{
        rules:[
            {test: /\.css$/, use: ['style-loader','css-loader']}  //它会处理以css结尾的文件，同时从该数组配置的两个loader的右边loader往左边执行
        ]
    }
    
}

③ 在src目录下新建测试文件 123.css ，写一个简单的样式如

body{

background-color: pink;

}

④ 在index.js中引入该样式文件 import ‘./123.css’

⑤ 在终端运行 npm run dev 命令，启动webpack进行项目打包.

处理less结尾的文件

① 执行命令 npm install less-loader less -D 安装加载器

② 修改 webpack.config.js 的配置文件，在module.exports里 module 的 rules中增加配置项

// webpack.config.js
...忽略其它内容

module.exports={
    ... 忽略其它内容
    module:{
        rules:[
            {test: /\.css$/, use: ['style-loader','css-loader']},
            {test: /\.less$/, use: ['style-loader','css-loader','less-loader']},
        ]
    }
    
}

③ 在src目录下新建测试文件 123.less ，写一个简单的样式如

body{

margin: 0;

padding: 0;

}

④ 在index.js中引入该样式文件 import ‘./123.less’

⑤ 在终端运行 npm run dev 命令，启动webpack进行项目打包.

处理scss结尾的文件

① 执行命令 npm install sass-loader node-sass -D 安装加载器

② 修改 webpack.config.js 的配置文件，在module.exports里 module 的 rules中增加配置项

// webpack.config.js
...忽略其它配置

module.exports={
   ...忽略其它配置
    module:{
        rules:[
            {test: /\.css$/, use: ['style-loader','css-loader']},
            {test: /\.less$/, use: ['style-loader','css-loader','less-loader']},
            {test: /\.scss$/, use: ['style-loader','css-loader','sass-loader']},
        ]
    }
    
}

③ 在src目录下新建测试文件 123.scss ，写一个简单的样式如

body{

background-color: #666;

}

④ 在index.js中引入该样式文件 import ‘./123.scss'

⑤ 在终端运行 npm run dev 命令，启动webpack进行项目打包.

配置postCSS自动添加css的兼容前缀

① 执行命令 npm install postcss-loader autoprefixer -D 安装加载器

② 在项目根目录新建 postcss.config.js 的配置文件，内容：

// postcss.config.js

const autoprefixer = require('autoprefixer') //导入自动添加前缀的插件

module.exports={

    plugins: [autoprefixer]   //挂载插件

  
}

③ 在src目录下修改测试文件 123.css ，写如下样式

　　::placeholder{

　　 color: red;

}

在src/index.html中body里面增加 <input type = 'text' placeholder='test' />

④ 修改 webpack.config.js 的配置文件，在module.exports里 module 的 rules中的.css里面追加

// webpack.config.js
...忽略其它配置

module.exports={
   ...忽略其它配置
    module:{
        rules:[
            {test: /\.css$/, use: ['style-loader','css-loader','postcss-loader']},
            {test: /\.less$/, use: ['style-loader','css-loader','less-loader']},
            {test: /\.scss$/, use: ['style-loader','css-loader','sass-loader']},
        ]
    }
    
}

⑤ 在终端运行 npm run dev 命令，启动webpack进行项目打包

⑥ 在不同的浏览器中观察效果是否一致

打包样式表中的图片或字体文件

① 执行命令 npm install url-loader file-loader -D 安装加载器

② 在src目录下修改测试文件 123.css ，写如下样式

　　#test{

with:300px;

height:200px;

backgroud: url(../images/1.jpg)

}

③在src/index.html中body里面增加 <div ></div> , 同时注意新建 images目录并放置1.jpg图片

④ 修改 webpack.config.js 的配置文件，在module.exports里 module 的 rules中的追加配置

// webpack.config.js
...忽略其它配置项

module.exports={

   ...忽略其它配置项

    module:{
        rules:[
            {test: /\.css$/, use: ['style-loader','css-loader','postcss-loader']},
            {test: /\.less$/, use: ['style-loader','css-loader','less-loader']},
            {test: /\.scss$/, use: ['style-loader','css-loader','sass-loader']},
            //当图片大小小于limit指定值(byte)则会被转成base64图片
            {test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: 'url-loader?limit=102400'} 
        ]
    }
    
}

⑤ 在终端运行 npm run dev 命令，启动webpack进行项目打包

打包JS文件中的高级语法

① 执行命令 npm install babel-loader @babel/core @babel/runtime -D 安装babel转换器相关包

② 执行命令 npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D 安装babel语法插件相关包

③在根目录创建babel的配置文件 babel.config.js ,内容如下：

// babel.config.js

module.exports={

    presets: ['@babel/preset-env'], //语法包
    plugins: ['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties']   //挂载插件

}

④ 修改 webpack.config.js 的配置文件，在module.exports里 module 的 rules中的追加配置

// webpack.config.js
 ...忽略其它配置

module.exports={

   ...忽略其它配置

    module:{
        rules:[
            {test: /\.css$/, use: ['style-loader','css-loader','postcss-loader']},
            {test: /\.less$/, use: ['style-loader','css-loader','less-loader']},
            {test: /\.scss$/, use: ['style-loader','css-loader','sass-loader']},
            //当图片大小小于limit指定值(byte)则会被转成base64图片
            {test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: 'url-loader?limit=102400'} ,
             ///node_modules目录下的是第三方包的不是我们写的代码必须排除掉
            {test: /\.js$/, use: 'babel-loader', exclude:/node_modules/} ,
        ]
    }
    
}

⑤ 在src/index.js中写一个测试代码

　　　　class Person{

　　　　　　 static info = 'aaa'

　　　　};

　　　　console.log(Person.info);

⑥ 在终端运行 npm run dev 命令，启动webpack进行项目打包.

配置vue组件的加载器

① 执行命令 npm install vue-loader vue-template-compiler -D 安装相关包

② 在webpack.config.js中添加如下配置

// webpack.config.js
...忽略其它配置

const VueLoaderPlugin = require('vue-loader/lib/plugin')    //vue插件

module.exports={

  ...忽略其它配置

    plugins: [htmlPlugin,new VueLoaderPlugin()],   //plugins数组是webpack打包用到的一些插件列表

    module:{
        rules:[
            {test: /\.css$/, use: ['style-loader','css-loader','postcss-loader']},
            {test: /\.less$/, use: ['style-loader','css-loader','less-loader']},
            {test: /\.scss$/, use: ['style-loader','css-loader','sass-loader']},
            //当图片大小小于limit指定值(byte)则会被转成base64图片
            {test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: 'url-loader?limit=102400'} ,
             ///node_modules目录下的是第三方包的不是我们写的代码必须排除掉
            {test: /\.js$/, use: 'babel-loader', exclude:/node_modules/} ,
            {test: /\.vue$/, use: 'vue-loader'} 
        ]
    }
    
}

③ 在src/index.js文件中引入.vue文件，如

import App from './components/App.vue'

④ 在终端运行 npm run dev 命令，启动webpack进行项目打包.

六、Webpack基本使用--VUE文件

　　① vue 单文件由3部分组成 template组件的模板区域 script业务逻辑区域 style样式区域

② 编写一个.vue文件示例注意在VSCode中安装插件 Vetur 这样编辑器才能识别和提示vue文件

<template>
    <div>
        <h3>这是App.vue的组件</h3>
    </div>
</template>

<script>

export default{

    data(){
        return {

        }
    },
    methods:{

    }
}
 
</script>

<style scoped>
    h3{
        color:red;
    }
</style>

③ 注意在当前项目根目录下的终端运行 npm install vue -S 来安装vue

七、Webpack项目中使用 vue

　　① npm install vue -S 安装vue

② 在src/index.js 入口文件中，通过 import Vue from 'vue' 来导入vue构造函数

③ 创建vue实例对象，并指定要控制的 el 区域

④ 通过 render函数渲染 App 根组件

// src/index.js
//忽略之前其它测试代码


//------------------华丽的分割线------------------------------
import Vue from 'vue'
//导入vue单文件组件
import App from './components/App.vue'

const vm = new Vue({
    el: '#app',

    render: c => c(App)
    
});

⑤ 在src/index.html 中加上 id为app 的 div

　　<div >

　　 </div>

⑥ 在终端运行 npm run dev 命令，启动webpack进行项目打包.

八、Webpack打包发布

　　① 修改项目根目录下的 package.json文件

② 在script中增加 build脚本

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 8288 --host 127.0.0.1 ",
    "build": "webpack "
  },

③ 在终端运行 npm run build 命令，webpack进行项目打包.，生成的文件在dist目录下.

注意: 这个是最简单的打包发布

附 package.json

{
  "name": "02_webpack_gehangbianse_New",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 8288 --host 127.0.0.1 ",
    "help": "webpack --help",
    "build": "webpack "
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.16.7",
    "@babel/plugin-proposal-class-properties": "^7.16.7",
    "@babel/plugin-transform-runtime": "^7.16.8",
    "@babel/preset-env": "^7.16.8",
    "@babel/runtime": "^7.16.7",
    "autoprefixer": "^10.4.2",
    "babel-loader": "^8.2.3",
    "css-loader": "^6.5.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "less": "^4.1.2",
    "less-loader": "^10.2.0",
    "node-sass": "^7.0.1",
    "postcss-loader": "^6.2.1",
    "sass-loader": "^12.4.0",
    "style-loader": "^3.3.1",
    "url-loader": "^4.1.1",
    "vue-loader": "^15.9.8",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^5.66.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.7.3"
  },
  "dependencies": {
    "vue": "^2.6.14"
  }
}

上一篇 »学习webpack4 自动化生成项目的html，下
下一篇 »html学习笔记

学习笔记--Webpack

相关推荐

Python基础学习笔记

Typescript 学习笔记二：数据类型

Vue学习笔记之Webpack搭建本地服务器及配置文件的分离

Webpack 学习2

webpack中使用typescript

webpack学习笔记--配置output

webpack学习笔记——项目引入zepto及tap事件失效的解决

webpack学习笔记，五 懒加载

webpack学习笔记，五懒加载