webpack 安装和配置启动命令

其他 2021-03-25 05:58:44 阅读次数: 0

webpack 安装和配置启动命令

安装

安装之前，需要先初始化项目， 生成package.json文件

  1. webpack 必须结合 webpack-cli 一起使用
npm init 
npm install webpack webpack-cli --save-dev

配置启动命令

  1. 在package.json 文件的 scripts 字段中配置
 "scripts": {
    
    
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production", // 配置生产环境
    "dev": "webpack --mode development" // 配置开发环境
  },

创建入口文件

webpack 默认的入口文件是 src文件夹下的index.js文件
3. 创建src文件夹和 index.js文件

执行命令

  1. 可以启动命令
npm run build
npm run dev

webpack 引入模块

  1. webpack 可以识别es6的模块导入和导出
// es6 导出
export function fun(){
    
    }
export let num = 10
export default function(){
    
    }

//  es6 导出
function fun(){
    
    }
const num = 100;
export {
    
    fun, num}

// 导入普通模块
import {
    
    fun, num} from 'url'
// 导入默认模块
import a from 'url'
  1. webpack 可以识别 nodejs的模块的导入和导出
// nodejs 导出模块
// module.exports 一个文件中只能使用一个
module.exports = {
    
    }
module.exports = () => {
    
    }
// exports 一个文件中可以使用多次
exports.key1 = value1
exports.key2 = value2
exports.key3 = value3


// 导入模块
require(url)
  1. webpack 可以引入第三方模块
npm install 第三方模块 --save/--save-dev

import 自定义模块名 from '模块名'

// 案例-引入jQuery： import $ from "jquery";

webpack 的模块 loader 配置

在项目的根目录下创建一个 webpack.config.js 文件 (webpack 会自动去查找该文件)

webpack 编译 css 文件

css文件可以直接加载

import 'css文件url'
  1. 安装 css-loader 和style-loader
npm install css-loader style-loader --save-dev
  1. 配置loader
module.exports = {
    
    
    // webpack 中的模块配置
    module:{
    
    
        // 模块引用配置规则
        rules:[
            // 每个对象都是一个功能模块的配置， 比如 css , 后期还有sass， less , 图片， es6及以上转es5等
            {
    
    
                test:/\.css$/,  // 匹配文件格式 使用正则匹配文件
                use:['style-loader', 'css-loader']  // 使用专用的loader 解析文件
            }
        ]
    }
}

webpack 编译 sass 文件

  1. 安装第三方包 sass 和loader : sass-loader
npm i sass sass-loader --save-dev
  1. 配置sass-loader
module.exports = {
    
    
    // webpack 中的模块配置
    module:{
    
    
        // 模块引用配置规则
        rules:[
            // 每个对象都是一个功能模块的配置， 比如 css , 后期还有sass， less , 图片， es6及以上转es5等
            {
    
    
                test:/\.css$/,  // 匹配文件格式 使用正则匹配文件
                use:['style-loader', 'css-loader']  // 使用专用的loader 解析文件
            },
            {
    
    
                test:/\.(sass|scss)$/,
                use:['style-loader', 'css-loader', 'sass-loader']
            }
        ]
    }
}

webpack 的插件plugin

使用插件之前先安装，然后在webpack.config.js文件中的plugins 中配置

HTML模板生成插件 html-webpack-plugin

  1. 安装
npm i  html-webpack-plugin --save-dev
  1. 引入
    在 webpack.config.js 引入
const HtmlWebpackPlugin = require('html-webpack-plugin')
  1. 进行配置 plugins 字段中配置
module.exports = {
    
    
    // webpack 中的模块配置
    module:{
    
    
        // 模块引用配置规则
        rules:[
            // 每个对象都是一个功能模块的配置， 比如 css , 后期还有sass， less , 图片， es6及以上转es5等
            {
    
    
                test:/\.css$/,  // 匹配文件格式 使用正则匹配文件
                use:['style-loader', 'css-loader']  // 使用专用的loader 解析文件
            },
            {
    
    
                test:/\.(sass|scss)$/,
                use:['style-loader', 'css-loader', 'sass-loader']
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
    
    
            title:'文件标题',
            filename:'生成的HTML文件名， 可以自定义',
            template:'模板文件url'
        })
    ]
}

清空dist 目录 clean-webpack-plugin

  1. 安装
npm i  clean-webpack-plugin --save-dev
  1. 引入
//  低版本
const CleanWebpackPlugin = require('clean-webpack-plugin')
//  高版本
const {
    
    CleanWebpackPlugin}  = require('clean-webpack-plugin')
  1. 配置
 plugins:[
        new HtmlWebpackPlugin({
    
    
            title:'文件标题',
            filename:'生成的HTML文件名， 可以自定义',
            template:'模板文件url'
        }),
        new CleanWebpackPlugin()
    ]

webpack-dev-server 热更新

  1. 安装模块
npm i --save-dev webpack-dev-server
  1. 在package.json文件中配置启动命令
"scripts":{
    
    
    "server":"webpack-dev-server --open"
}
  1. 在webpack.config.js 文件中配置devServer属性
devServer:{
    
    
    contentBase:'./dist'  // 配置服务器的目录
    port:9000 // 配置服务端口
}
  1. 运行启动命令
npm run server

webpack 的图片文件处理

  1. 安装url-loader 和 file-loader
npm i url-loader file-loader --save-dev
  1. 在webpack.config.js中配置 loader
{
    
    
    test:/\.(jpeg|jpg|png|gif|webp)$/i,
    use:[
        {
    
    
            loader:'url-loader',
            limit:8192 // 限制图片大小，可选项； 当图片小于limit的限制值时， 会把图片转换为base64, 减少请求次数
            name:'[name].[ext]' // 配置输出的图片格式 (输出图片的路径url)（图片名字和扩展名）
            //  [name] 使用原资源的名字   [ext] 资源的扩展名  [hash] 哈希值
            // name:'./images/[name].[ext]' // 配置输出的图片格式 (输出图片的路径url)（图片名字和扩展名）
        }
    ]
}
  1. 把图片作为模块在入口文件js中进行加载
// 入口 index.js
//  图片作为资源直接加载使用
import './image/img1.jpg'
import './image/img2.png'


//  图片作为模块加载使用
import img1 from './image/img1.jpg';

const img_res = new Image();
img_res.src = img1;
//  添加到页面中
document.body.appendChild(img_res)

webpack 的入口entry配置 和 出口output

  • entry 的值是一个字符串， 是入口文件的地址url， 配置单一入口
const path = require('path')
module.exports = {
    
    
    entry:'./src/index.js',
    output:{
    
    
        //  打包生成的文件名
        filename:'index.js',
        //  配置输出文件的路径
        path:path.resolve(__dirname, './dist');
    }
}
  • entry 的值是一个数组，数组中的值是一个字符串, 是入口文件的地址url， 配置单一入口

// 把多个入口文件合并成一个文件打包输出
module.exports = {
    
    
    entry:['./src/index.js', './src/list.js'],
     output:{
    
    
        //  打包生成的文件名
        filename:'index.js',
        //  配置输出文件的路径
        path:path.resolve(__dirname, './dist');
    }
}
  • entry 的值是一个对象， 对象的key 是打包输出文件的文件名, 配置多入口文件
module.exports = {
    
    
    entry:{
    
    
        index:'./src/index.js',
        list:'./src/list.js'
    },
    //  配置多入口的打包输出文件 [name] 映射的是entry 中的key
    output:{
    
    
        filename:'[name].js',
        path:path.resolve(__dirname, './dist');
    }
}

webpack 配置babel转码es6

  1. 安装相关依赖包

使用 @babel/polyfill 的原因：Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign）都不会转码。必须使用 @babel/polyfill，为当前环境提供一个垫片。
所谓垫片也就是垫平不同浏览器或者不同环境下的差异

使用 @babel/plugin-transform-runtime 的原因：Babel 使用非常小的助手来完成常见功能。默认情况下，这将添加到需要它的每个文件中。这种重复有时是不必要的，尤其是当你的应用程序分布在多个文件上的时候。
transform-runtime 可以重复使用 Babel 注入的程序代码来节省代码，减小体积。

如果是用 babel7 来转译，需要安装 @babel/core、@babel/preset-env 和 @babel/plugin-transform-runtime，而不是 babel-core、babel-preset-env 和 babel-plugin-transform-runtime，它们是用于 babel6 的

链接：https://juejin.cn/post/6844903817322954759

核心包的解析：

  • @babel/core
  • @babel/preset-env: 包含 ES6、7 等版本的语法转化规则
  • @babel/plugin-transform-runtime: 避免 polyfill 污染全局变量，减小打包体积
  • @babel/polyfill: ES6 内置方法和函数转化垫片
  • babel-loader: 负责 ES6 语法转化
npm i @babel/core babel-loader @babel/preset-env @babel/plugin-transform-runtime --save-dev
  1. 在 webpack.config.js 中配置loader
{
    
    
    test:/\.js$/,
    exclude: /node_modules/, // 排除依赖包文件夹
    use:['babel-loader']
}
  1. 在项目的根目录下创建一个babel的配置文件 .babelrc
{
    
    
    "presets": [
        "@babel/env"
    ],
    "plugins": ["@babel/plugin-transform-runtime"]
}

https://juejin.cn/post/6844903817343926280#heading-15

猜你喜欢

转载自blog.csdn.net/z459148345/article/details/114434998
今日推荐
周排行
K - 一只小蜜蜂...
linux vps主机配置流程
Servlet的机制是什么呢 ？
51单处机 串行通信原理及实现
spring类的注入和new简单理解
剑指offer之复杂链表的复制
RHCS(高可用)
B - Nim--尼姆博弈
7.建造者模式
GitLab + Jenkins 集成环境搭建与配置
每日归档
更多
2025-02-19(0)
2025-02-18(0)
2025-02-17(0)
2025-02-16(0)
2025-02-15(0)
2025-02-14(0)
2025-02-13(0)
2025-02-12(0)
2025-02-11(0)
2025-02-10(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022