webpack常见面试题

1.从零开始搭建一个简单的基于webpack的vue开发环境a.安装webpack npm i webpack -gb.项目初始化1)新建项目文件夹‘myproject’2)创建package.json.。 npm init -y3)安装vue,webpack,webpack-dev-server npm i vue --save...

jiaojsun

11622人浏览 · 2019-06-27 10:57:46

jiaojsun · 2019-06-27 10:57:46 发布

1.从零开始搭建一个简单的基于webpack的vue开发环境

a.安装webpack npm i webpack -g

b.项目初始化

1)新建项目文件夹‘myproject’

2)创建package.json.。 npm init -y

3)安装vue,webpack,webpack-dev-server npm i vue --save npm i webpack webpack-dev-server --save-dev

4)根目录下新建index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>

5)根目录下新建webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {};

6)新建src文件夹，src文件夹下新建main.js

项目初始化完了之后，整个项目目录是这个样子

c.js模块化

d.引入vue

main.js

import Vue from 'vue';

var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});

e.引入scss和css

f.使用babel转码

g.引入图片资源

h.source-map

2.什么是webpack

webpack是一个打包模块化javascript的工具，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

3.loader，plugin

loader:

loader 让 webpack 能够去处理那些非 JavaScript 文件
对于loader，它就是一个转换器，将A文件进行编译形成B文件，这里操作的是文件
loader可以将sass，less文件的写法转换成css，而不在使用其他转换工具。
可以将ES6或者ES7的代码，转换成大多数浏览器兼容的JS代码。

plugin

css-loader：加载 CSS，支持模块化、压缩、文件导入等特性
style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS

插件目的在于解决 loader 无法实现的其他事

mini-css-extract-plugin：分离css文件
clean-webpack-plugin：删除打包文件

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^