webpack常见面试题

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

       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：删除打包文件