zoukankan      html  css  js  c++  java
  • webpack的基本配置(初识)

    webpack能根据模块的依赖关系递归地构建一个依赖关系图,当中包含了应用程序所需要的所有模块,最后打包成一个或多个bundle.它有四个核心概念entry、output

    、loader、plugin.下面介绍其基本使用:

    1.新建一个webpacktest文件夹,下面新建两个文件夹分别为src、dist.

    2.在终端打开webpacktest,执行npm init 初始化后目录下会多一个package.json文件,再安装Webpack包.

    (1)全局安装webpack(只在该项目中用,就不用-g)

    npm install -g webpack webpack-cli

    (2)在src文件夹下建一个index.js作为默认的入口文件

      在index.js中写入测试代码,如下:

    console.log("hello world");

    (3)在package.json文件中,写入下列代码

    "scripts": {
        "test": "echo "Error: no test specified" && exit 1",
        "build": "webpack --mode development" // 写入这句代码,利用webpack进行打包,并把模式设置为 --mode development
      }

    模式有两种:development(打包后代码不压缩)、production(打包后代码压缩)

    (4)现在在终端运行npm run build ,dist文件夹下就生成了打包好的main.js文件(dist下的main.js是默认的出口文件).

    npm run build

    以上是零配置的webpack。

    3.在根目录下建一个webpack.config.js文件(以下简称配置文件),对webpack进行配置

    (注意:每次改写配置文件,都要重新启动,才能生效)

    (1)首先配置好入口和出口文件

    const path = require('path');
    
    module.exports = {
        entry: './src/index.js',
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'bundle.js' //bundle.js是打包后在dist文件夹下生成的文件名(之前默认的是main.js),也可以改为其他的名字
        }
    };

    现在npm run build , dist 文件下会生成一个bundle.js文件(main.js文件还在)

    (2)在根目录下,新建一个index.html文件,来引用生成的bundle.js文件(测试打包是否成功),并在浏览器中打开,浏览器控制台就能显示hello world了。

    但是这样每次修改src下的index.js文件后,都需要重新运行npm run build,非常麻烦。

    改写package.json文件,使webpack可以实时监听src下index.js文件的变化,自动打包。

    "scripts": {
        "test": "echo "Error: no test specified" && exit 1",
        "build": "webpack --mode production -w" //只用配置上 -w   
      }

    (3)设置hash码,解决缓存的问题

    const path = require('path');
    
    module.exports = {
        entry: './src/index.js',
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'bundle[hash:8].js' //设置8位hash值
        }
    };

    现在打包后index.html要引入dist中生成的js文件非常的麻烦,因为每次改动src下的index.js文件都会自动生成带有不同hash值的bundle.js文件.因此要安装下面的插件.

    (4)安装html-webpack-plugin插件(上面的index.html引入bundle.js文件是手动引入的,这个插件可以自动引入)

    作用:1.这个插件还会自动根据html模板,在dist文件下生成一个html文件2.自动引入打包后的js文件

    npm i --save-dev html-webpack-plugin

    在配置文件中引入

    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin'); //引入插件
    
    module.exports = {
        entry: './src/index.js',
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'bundle[hash:8].js'
        },
        plugins: [
            new HtmlWebpackPlugin({ template: './index.html' })  //实例化 并且将根目录下的index.html文件作为模板
        ]
    };

    这时候你发现,dist文件夹下,有很多之前打包生成的文件,它们不会自动清除.因此要下载下面的插件.解决这个问题.

    (5)安装clean-webpack-plugin插件(清除之前的打包文件,只留下当前的打包文件)

    npm install --save-dev clean-webpack-plugin

    在配置文件中引入

    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const { CleanWebpackPlugin } = require('clean-webpack-plugin');
    module.exports = {
        entry: './src/index.js',
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'bundle[hash:8].js'
        },
        plugins: [
            new HtmlWebpackPlugin({ template: './index.html' }),
            new CleanWebpackPlugin()
        ]
    };

    现在打包后,之前的文件就会自动被清除了.

    (6)现在还不能引入css样式,要想加载css样式,要下载style-loader、css-loader包

    npm install --save-dev style-loader css-loader

    在src下新建index.css文件并写入样式,并在index.js中引入该文件

    在配置文件中引入插件

    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const { CleanWebpackPlugin } = require('clean-webpack-plugin');
    module.exports = {
        entry: './src/index.js',
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'bundle[hash:8].js'
        },
        module: {                  //配置
            rules: [
                {
                    test: /.css$/,
                    use: ['style-loader', 'css-loader']
                }
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({ template: './index.html' }),
            new CleanWebpackPlugin()
        ]
    };

    现在再次进行打包,可以在浏览器看到写入的样式已经生效了.

    webpack只能解析js文件,想要解析css、图片等文件都要下载相关的插件(加载器)(参考webpack官网).解析图片要下载file-loader、url-loader。

    (7)下载webpack-dev-server插件

    npm install webpack-dev-server --save-dev

    改写package.json文件

    "scripts": {
        "test": "echo "Error: no test specified" && exit 1",
        "build": "webpack --mode production -w",
        "start":"webpack-dev-server --progress --open -w"    //插入这行代码
      }

    --progress 显示进度条  --open自动打开浏览器  -w监听

    在配置文件中配置

    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const { CleanWebpackPlugin } = require('clean-webpack-plugin');
    module.exports = {
        entry: './src/index.js',
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'bundle[hash:8].js'
        },
        devServer: {
            inline: true,   //热更新,改变文件,浏览器自动更新
            port: 8000      //改变端口为8000
        },
        module: {
            rules: [
                {
                    test: /.css$/,
                    use: ['style-loader', 'css-loader']
                }
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({ template: './index.html' }),
            new CleanWebpackPlugin()
        ]
    };

    现在运行 npm start  会显示打包的进度条(因为现在打包文件太小,可能看不到)浏览器会自动跳出窗口。

  • 相关阅读:
    命令拷屏之网络工具
    PHP 设计模式 笔记与总结(1)命名空间 与 类的自动载入
    Java实现 计蒜客 1251 仙岛求药
    Java实现 计蒜客 1251 仙岛求药
    Java实现 计蒜客 1251 仙岛求药
    Java实现 蓝桥杯 算法训练 字符串合并
    Java实现 蓝桥杯 算法训练 字符串合并
    Java实现 蓝桥杯 算法训练 字符串合并
    Java实现 LeetCode 143 重排链表
    Java实现 LeetCode 143 重排链表
  • 原文地址:https://www.cnblogs.com/yizhao/p/12383671.html
Copyright © 2011-2022 走看看