webpack系列---webpack介绍&基本使用

切图仔

发布于 2022-09-08 15:45:47

5370

发布于 2022-09-08 15:45:47

文章被收录于专栏：生如夏花绚烂

最基本的使用方式

1.全局安装 npm i webpack -g 全局使用webpack命令

2.安装到项目依赖有时候我们的项目要依赖webpack，可以运行npm i webpack --save-dev

示例——隔行变色

1.新键变成目录

2.引入jquery npm init -y npm i jquery -s

3.html结构

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <script type="text/javascript" src='./main.js'></script>
</body>
</html>

4.入口js文件

//导入jquery
import $ from 'jquery'

$(function(){
    $('li:odd').css('backgroundColor','blue')
    $('li:even').cs('backgroundColor','gray')
})

main.js使用了es6的语法 import,必须利用webpack编译才能正常运行在浏览器上

5.新建webpack.config.js 这是webpack的配置文件，在里面设置打包入口，出口等信息

//webpack.config.js
const path = require('path')
 module.exports = {
     //入口文件
     entry:path.join(__dirname,'./src/main.js'),
     output:{
         //输出文件相关配置
         path:path.join(__dirname,'./dist'),
         filename:'bundle.js'
     }
 }

在命令工具输入webpack完成打包编译

打包后的文件在/dist/bundle.js因此我们的index.html 文件要引入打包后的bundle.js

<script type="text/javascript" src='../dist/bundle.js'></script>

成功运行到浏览器

sourcemap

主要有以下配置

  devtool:'source-map',//增加映射文件，方便调试代码
    devtool:'eval-source-map',//不会产生单独文件 可以立即调试
    devtool:'cheap-module-source-map',//不会产生列表 但是会产生一个单独文件，保留用于调试
    devtool:'cheap-module-eval-source-map',//不会产生文件 集成在打包后的文件中 不会产生列、

watch

文件自动监控打包

...
 watch:true,
    watchOptions:{
        //监控选项
        poll:1000,//1秒检测一次
        aggregateTimeout:500,//防抖 500毫秒内输入的东西只打包一次
        ignored:/node_modules///不需要监控
    },
    output:{
        ...

运行webpack命令后自动监控打包

resolve

设置模块如何被解析

resolve:{
     modules:[path.resolve('node_modules'),path.resolve('test')]//设置第三方模板的查找范围
         extensions:['.vue','.'js','.json']//引入模块省略扩展名时规定以vue->js->json的文件格式查找
         alias:{
             bootstrap:'bootstrap/dist/css/bootstrap.css'
                 /*页面直接引入bootstrap，而不会自动找到bootstrap.js*/
         },
         mainFields:['style','main']先找style目录在找main
         
}

环境变量

在开发中我们要根据不同的环境进行不同的操作如下

if(DEV==='dev'){
    url=’http://localhost‘
}else{
    url='http://www.zihanzy.com'
}
console.lo(url)

那我们怎么区分当前环境呢？通过webpack plugin 首先引入 npm i cross-env 在package.json进行配置,手动设置环境变量

...
 "scripts": {
    "build": "cross-env NODE=production webpack --config webpack.config.js",
    "dev": "cross-env NODE=production webpack-dev-server --config webpack.config.js"
  },
    ...

在webpack配置文件

const idDev = process.env.NODE_ENV==='development'
let webpack = require('webpack')
plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html',
            filename:'home.html',
        }),
                new webpack.DefinePlugin({
            'process.env':{
                NODE_ENV:isDev?'"dev"':'"pro"'
            }
        }),
       
     
 ]

if(process.env.NODE_ENV==='dev'){
    url=’http://localhost‘
}else{
    url='http://www.zihanzy.com'
}
console.lo(url)//'http://www.zihanzy.com'

当然只区分环境变量是不够的，我们一般有三套配置，分别为基础配置、开发配置、生产配置然后根据环境变量运行不同的配置文件

引入模块合并配置文件 cnpm i webpack-merge -D webpack.base.js

let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require ('clean-webpack-plugin')
let webpack = require('webpack');
module.exports={
    entry:{
        home:'./src/index.js',
    },
    module:{
        rules:[
            {
                test:/\.js$/,
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:['@babel/preset-env']
                    }
                }
            }
        ]

    },
    output:{
        //[name]=home/other
        filename:'main.js',
        path:path.resolve(__dirname,'dist')

    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html',
            filename:'home.html',
        }),
        new webpack.DefinePlugin({
            DEV:JSON.stringify('pro')
        })
     
    ]
}

webpack.pro.js

let { merge } = require('webpack-merge');
let base = require('./webpack.base.js');

module.exports =merge(base,{
    mode:'production'
})

webpack.dev.js

let { merge } = require('webpack-merge');
let base = require('./webpack.base.js');

module.exports =  merge(base,{
    mode:'development'
})

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-06-28 ，如有侵权请联系 cloudcommunity@tencent.com 删除

webpack

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度