webpack

最新推荐文章于 2019-10-25 14:18:12 发布

翻译最新推荐文章于 2019-10-25 14:18:12 发布 · 158 阅读

webpack 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍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