webpack

最新推荐文章于 2023-07-03 00:46:30 发布

风继续吹&

最新推荐文章于 2023-07-03 00:46:30 发布

阅读量117

点赞数

分类专栏： vue.js 文章标签： vue

本文链接：https://blog.csdn.net/qq_48930299/article/details/119218797

版权

vue.js 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

1.安装webpack

cnpm i webpack@4 webpack-cli@3 -g

cnpm i webpack@4 webpack-cli@3 -S

2.创建webpack.config.js放在创建config文件下，在src下面创建index.js

在这里插入图片描述

3.控制台输入

打包项目测试，注意不同的形式默认打包的文件名称不一样

webpack --config './config/webpack.config.js'

4.配置入口文件出口文件

const path=require('path')
module.exports = {
    // mode:'development', //模式 打包完文件未压缩
    mode: 'production', //打包完文件压缩

    //webpack属于node.js

    //当前程序的入口，必不可少 打包时通过 webpack指令
    // entry:'./src/index.js'
    // entry:['./src/index.js']
    entry: {
        app: './src/index.js'// 指明打包出来的文件的名称为  app.js
    },

    // 出口文件
    output:{
        path: path.resolve(__dirname, '../', 'build'), // 指明打包出来的文件夹为build
        filename: '[name].[hash:8].js' //[name]就相当于上面的app.[hash:8] 防止缓存
    }
}

5.配置常用的插件

cnpm i -S html-webpack-plugin@4

 //配置 webpack常用的插件
    plugins: [
        // new HtmlWebpackPlugin() // 打包之后在build目录下会出现index.html,并且自动引入 js文件 
        // 如果需要指定build目录下的 index.html 是public 目录下的模版，可以继续配置
        new HtmlWebpackPlugin({
            //配置项
            template: './public/index.html', // 模版代码
            // title: 'webpack 神奇之旅'
        })
    ]

6.在public.html下改变引入的方式link

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= htmlWebpackPlugin.options.url %>favicon.ico"> 

    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <!-- <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript> -->
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

7.如果不想每次都出来一个新文件就

cnpm install --save-dev clean-webpack-plugin

显示进度条

在这里插入代码片

风继续吹&

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录