vue webpack 笔记了解即可

LI548

已于 2022-03-10 20:59:10 修改

阅读量104

点赞数

文章标签： webpack vue.js javascript

于 2022-03-08 19:06:51 首次发布

本文链接：https://blog.csdn.net/weixin_55770974/article/details/123307312

版权

执行 npm install -g @vue/cli 即可将下述全部安装

vue create 项目名称即可创建 webpack项目

以下版本号可不加（@后的）

安装webpack 的2个包

npm install webpack@5.42.1 webpack-cli@4.7.2 -D

安装 npm install webpack-dev-server@3.11.2 -D（安装后修改js会自动刷新）

开发时：development 发布时 production

development 打包速度快体积大

production 打包速度慢体积小

在向 html中导入script时路径应为 dist中的main.js（默认）

以下接在 module.exprots={}中

更改处理对象

配置htmlplugin （使index.html成为首页）

// 配置htmlplugin 
//导入htmlplugin 模块
const Htmlplugin=require('html-webpack-plugin')
//创建html实例对象
const htmlplugin=new Htmlplugin({
    template :'./src/index.html',//指定源文件存放路径
    filename:'./index.html'//指定生成文件存放路径
})
module.exports={
    mode:'development',
    plugins: [htmlplugin]//通过plugins节点，使htmlplugin插件生效
}

devServer 自动打开网页及修改运行主机地址 (在module.exports中）

安装 npm install html-webpack-plugin@5.3.2 -D（自定制 index.html 页面的内容）（devserver）


    devServer:{
        //open 首次打包成功后自动打开浏览器
        open:true,
        //在浏览器中80端口可被省略
        port:80,
        //指定运行的主机地址
        host:'127.0.0.1'

在js中导入css less

安装打包处理文件(rules)

css: npm i style-loader@3.0.0 css-loader@5.2.6 -D

less: npm i less-loader@10.0.1 less@4.1.1 -D

import './css/index.css'

import './css/index.less'

 module:{
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader']},
            {test:/.\less$/,use:['style-loadar','css-loader','less-loader'}
    ]
}