webpack

本文详细介绍Webpack 4以上版本的安装过程,包括核心依赖的配置与使用,如webpack-cli的安装,以及如何通过修改package.json实现自动化打包。深入探讨了模块导入、css、图片和less文件的处理方法,同时介绍了html-webpack-plugin的使用和SplitChunksPlugin的分包策略。

webPack

安装

  • webpack 4.0以上的版本,必须单独安装webpack 和 webpack-cil
  • 安装指令如下
cnpm install webpack 
cnpm install -g webpack-cli

使用

  • index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">

    </div>
    <script type="text/javascript" src="./build.js"></script>
</body>
</html>

  • main.js

//esModule模块导入
import Vue from './vue.js'
import App from './App.js'

new Vue({
    el: '#app',
    components:{
        App
    },
    template:`<App/>`
})
  • App.js
var App = {
    template:`<div>我是一个入口组件</div>`
}

//抛出App让main引用
export default App

执行打包命令

webpack ./main.js -o build.js

除了导出vue组件之外,export还可以导出单个变量和函数

App.js

// 声明,并导出
export var num1 = 2; //作为一整个对象key导出

//声明再导出
var num2 = 3;
export {num2};

export function add(x,y) {
    console.log(x+y)
}

main.js

//esModule模块导入
import Vue from './vue.js'
import App from './App.js'

import {num1,num2,add} from "./App.js";

console.log(num1);
console.log(num2);

console.log('main-------------');
add(5,6)

new Vue({
    el: '#app',
    components:{
        App
    },
    template:`<App/>`
});
此外,我们可以将webpack打包命令写入package.json,这样就不用每次通过命令行打包了
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack ./main.js -o build.js"
  },
然后再终端输入

npm run build


webpackConfig配置

module.exports = {
    //入口
    entry: {
        // 可以有多个入口,也可以有一个,如果有一个就默认从这个入口开始解析
        "main":"./main.js"
    },
    output:{
        filename:'./build.js'
    },
    watch:true ,  //文件监视改动,自动编译
    // watchOptions: {
    //     poll: 1000, //检测代码修改时间,以毫秒为单位
    //     aggregeateTimeout: 500, //防止重复保存而发生重复编译错误,这里设置的500为半秒内重复保存,不进行打包操作
    //     ignored: /node_modules/ //不监听目录,使用正则匹配
    // },
}

使用指令

    "dev": "webpack --config ./webpack.config.js",

css文件处理

安装

npm i css-loader style-loader -D
使用css-loader和style-loader

   module:{
        rules:[
            {
                //遇到后缀为.css的文件,webpack先用css-loader加载器去解析这个文件
                //然后会使用style-loader生成style标签放入header中
                test:/\.css$/,
                loaders:'style-loader!css-loader'
            }
        ]
    }

图片处理

使用url-loader

less文件处理

安装

npm install less -D
npm install i less-loader -D

使用less-loader

自动输出html代码和js文件到指定路径

-下载html-webpack-plugin -D

npm i html-webpack-plugin -D

  • 引用
const HtmlWebpackPlugin = require('html-webpack-plugin')
  • 使用
plugins:[
    new HtmlWebpackPlugin({
        template:'./src/index.html'   //参照物
    })
],
  • npm run dev编译

SplitChunksPlugin分包

https://segmentfault.com/a/1190000015938570
https://www.jianshu.com/p/2cc8457f1a10

webpack.ensure 异步加载js

https://www.jianshu.com/p/9fa38e536033
https://blog.youkuaiyun.com/chiuwingyan/article/details/80666778

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值