VUE学习笔记--webpack(下)

简介: VUE学习笔记--webpack(下)

处理less文件

运行

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

在webpack.confing.js文件中的module->rules数组中添加:

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

处理url路径相关的文件

npm i url-loader@4.1.1 file-loader@6.2.0 -D

js给img标签导入图片

<!-- 需求:把 /src/images/01.jpg 设置给src属性 -->
    <img src="" alt="" class="box"
// 导入图片,得到图片文件
import i from './images/01.jpg'
// 给img标签的src动态赋值
$('.box').attr( 'src', i )

补充:小图片适合转成base64,大图片不合适,转成base64图片体积会变大

打包处理js文件中的高级语法:

npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D

//导入html-webpack-plugin插件 得到插件的构造函数
const HtmlPlugin = require('html-webpack-plugin')
// new构造函数创建插件的实例对象
const htmlPlugin = new HtmlPlugin({
    // 指定要复制哪个页面
    template: './src/index.html',
    // 指定复制出来的文件名和存放路径
    filename: './index.html'
})
// 使用Node.js中的导出语法,向外导出一个webpack的配置对象
module.exports = {
    // 代表webpack运行的模式,可选值有两个development和production
    mode: 'development',
    // 插件的数组 将来webpack在运行时会加载并调用这些插件
    plugins: [htmlPlugin],
    devServer: {
        // 首次打包成功后自动打开浏览器
        open:true,
        // 在http协议中如果端口号为80可以省略
        port:8080,
        // 指定主机运行的地址
        host:'127.0.0.1' 
    },
    module: {
        rules:[
            {test:/\.css$/, use:['style-loader', 'css-loader']},
            {test:/\.less$/, use:['style-loader', 'css-loader', 'less-loader']},
            // 处理图片文件的loader
            // 如果需要调用的loader只有一个,则只传递一个字符串就行,如果有多个loader则必须指定数组
            { test:/\.jpg|png|gif$/, use: 'url-loader?limit=22229' },
            // 使用babel-loader处理高级的js语法
            // 注意:必须使用exclude排除指定项;因为node_modules目录下的第三方包不需要被打包
            {test:/\.js$/, use: 'babel-loader', exclude: /node_modules/}
        ]
    }
}

module.exports = {
    // 声明babel可用插件
    plugins: [['@babel/plugin-proposal-decorators', {legacy:true}]]

发布

优化打包后文件的存储路径:

建议写法:

module: {
        rules:[
            {test:/\.css$/, use:['style-loader', 'css-loader']},
            {test:/\.less$/, use:['style-loader', 'css-loader', 'less-loader']},
            // 处理图片文件的loader
            // 如果需要调用的loader只有一个,则只传递一个字符串就行,如果有多个loader则必须指定数组
            { test:/\.jpg|png|gif$/, use: 'url-loader?limit=22229&outputPath=images' },
            // 使用babel-loader处理高级的js语法
            // 注意:必须使用exclude排除指定项;因为node_modules目录下的第三方包不需要被打包
            {test:/\.js$/, use: 'babel-loader', exclude: /node_modules/}
        ]
    }

打包时清理旧文件:

插件安装文档

可以搜索对应插件,根据文档可以自行安装插件

Source Map

Source Map 可以在报错时提示对应的源文件的行号,便于定位错误位置修改错误

补充:文件后缀为 .map 为Source Map文件,文件中记录了源码对应的行号信息

package.json:

"scripts": {
    "dev": "webpack serve",
    "build": "webpack --mode production"
  },

webpack.config.js:

// 使用Node.js中的导出语法,向外导出一个webpack的配置对象
module.exports = {
    // devtool: 'eval-source-map',
    devtool: 'nosources-source-map',
    // 代表webpack运行的模式,可选值有两个development和production
    mode: 'development',
    entry: path.join(__dirname, './src/index.js'),
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'js/main.js'
    },
    // 插件的数组 将来webpack在运行时会加载并调用这些插件
    plugins: [htmlPlugin,new CleanWebpackPlugin()],
    devServer: {
        // 首次打包成功后自动打开浏览器
        open:true,
        // 在http协议中如果端口号为80可以省略
        port:8080,
        // 指定主机运行的地址
        host:'127.0.0.1' 
    },
    module: {
        rules:[
            {test:/\.css$/, use:['style-loader', 'css-loader']},
            {test:/\.less$/, use:['style-loader', 'css-loader', 'less-loader']},
            // 处理图片文件的loader
            // 如果需要调用的loader只有一个,则只传递一个字符串就行,如果有多个loader则必须指定数组
            { test:/\.jpg|png|gif$/, use: 'url-loader?limit=22229&outputPath=images' },
            // 使用babel-loader处理高级的js语法
            // 注意:必须使用exclude排除指定项;因为node_modules目录下的第三方包不需要被打包
            {test:/\.js$/, use: 'babel-loader', exclude: /node_modules/}
        ]
    }
}

实际开发中不需要自己配置webpack,有CLI一键生成带有webpack的项目

使用@代替./ …/

@代表src源代码目录

使用@从src开始向内查找

使用./ …/ 从当前文件向外查找

配置

webpack.config.js文件

const path = require('path')
//导入html-webpack-plugin插件 得到插件的构造函数
const HtmlPlugin = require('html-webpack-plugin')
// new构造函数创建插件的实例对象
const htmlPlugin = new HtmlPlugin({
    // 指定要复制哪个页面
    template: './src/index.html',
    // 指定复制出来的文件名和存放路径
    filename: './index.html'
})
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// 使用Node.js中的导出语法,向外导出一个webpack的配置对象
module.exports = {
    // devtool: 'eval-source-map',
    devtool: 'nosources-source-map',
    // 代表webpack运行的模式,可选值有两个development和production
    mode: 'development',
    entry: path.join(__dirname, './src/index.js'),
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'js/main.js'
    },
    // 插件的数组 将来webpack在运行时会加载并调用这些插件
    plugins: [htmlPlugin,new CleanWebpackPlugin()],
    devServer: {
        // 首次打包成功后自动打开浏览器
        open:true,
        // 在http协议中如果端口号为80可以省略
        port:8080,
        // 指定主机运行的地址
        host:'127.0.0.1' 
    },
    module: {
        rules:[
            {test:/\.css$/, use:['style-loader', 'css-loader']},
            {test:/\.less$/, use:['style-loader', 'css-loader', 'less-loader']},
            // 处理图片文件的loader
            // 如果需要调用的loader只有一个,则只传递一个字符串就行,如果有多个loader则必须指定数组
            { test:/\.jpg|png|gif$/, use: 'url-loader?limit=22229&outputPath=images' },
            // 使用babel-loader处理高级的js语法
            // 注意:必须使用exclude排除指定项;因为node_modules目录下的第三方包不需要被打包
            {test:/\.js$/, use: 'babel-loader', exclude: /node_modules/}
        ]
    },
    resolve: {
        alias: {
            //告诉webpack @代表src这一层目录
            '@' : path.join(__dirname, './src/')
        }
    }
}


相关文章
|
2月前
|
缓存 JavaScript 前端开发
Vue学习笔记(六) 长乐未央
Vue学习笔记(六) 长乐未央
|
2月前
|
JavaScript 前端开发
Vue学习笔记(五) 长乐无极
Vue学习笔记(五) 长乐无极
|
12天前
|
JavaScript
Vue 开发中的一些问题简单记录,Cannot find module ‘webpack/lib/RuleSet‘
Vue 开发中的一些问题简单记录,Cannot find module ‘webpack/lib/RuleSet‘
35 1
|
8天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的云的学习笔记系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的云的学习笔记系统附带文章源码部署视频讲解等
10 0
|
13天前
|
JavaScript 前端开发 应用服务中间件
|
15天前
|
JavaScript
vue 配置【详解】 vue.config.js ( 含 webpack 配置 )
vue 配置【详解】 vue.config.js ( 含 webpack 配置 )
18 0
|
2月前
|
JavaScript 前端开发
构建工具:配置Webpack打包Vue项目
【4月更文挑战第24天】本文介绍了如何配置Webpack来打包Vue项目。首先,Webpack作为模块打包器处理依赖并打包成可执行文件。接着,通过安装Node.js和npm,创建Vue项目,进入项目目录并配置Webpack的入口、输出、加载器和插件。最后,运行构建命令完成打包。理解Webpack基础并按需配置,能优化前端项目构建和开发体验。
|
2月前
|
前端开发 JavaScript 容器
前端vw自适应解决方案,适用pc端以及移动端,适用webpack以及vite,适用vue以及react
前端vw自适应解决方案,适用pc端以及移动端,适用webpack以及vite,适用vue以及react
161 0
|
2月前
|
缓存 移动开发 JavaScript
【学习笔记】Vue Router
【学习笔记】Vue Router
40 0
|
2月前
|
JavaScript 前端开发 C++
Vue学习笔记(四) 久处不厌
Vue学习笔记(四) 久处不厌