webpack中文

>开始 （确认已经安装node环境和npm包管理工具） 1、新建项目文件名为vuedemo 2、 npm init -y 初始化项目 >安装项目依赖 3、 npm install --save vue 默认安装最新版vue 4、 npm install --save-dev webpack webpack-dev-server 安装webpack，webpack-dev-server（是一个小型的Node.js Express服务器） *拓展：npm install 在安装 npm 包时，有两种命令参数可以把它们的信息写入 package.json 文件，一个是npm install --save另一个是 npm install --save-dev，他们表面上的区别是--save 会把依赖包名称添加到 package.json 文件 dependencies 键下，--save-dev 则添加到 package.json 文件 devDependencies 键下， --save-dev 是你开发时候依赖的东西，--save 是你发布之后还依赖的东西。* 5、 npm install --save-dev babel-core babel-loader babel-preset-es2015 安装babel，babel的作用是将es6的语法编译成浏览器认识的语法es5 6、

项目构建分析和 webpack 优化实践 最近接手在做一个chrom浏览器插件的项目，开发过程中发现项目打包的时间很长，足足有30多秒，这是让人很难接受的，而且构建的显示了几条包体积过大的提示信息： [image:073CB50B-06EB-4779-84FE-D11087B12BD7-47140-0000087E666F3C39/1967FDC4-F9FA-44F3-922E-5406A46415FB.png] 可以看到，打包后有三个包超过了建议的体积，是什么导致了打包时间长和包的体积过大呢？下面通过一些具体方法来分析原因和解决这个问题。 什么原因导致构建包变得这么大？ 为了分析是什么导致构建包为什么会变得这么大，可以安装 webpack-bundle-analyzer 插件，通过它可以直观地查看构建包中所有项目的大小。 npm install —save-dev webpack-bundle-analyzer 对应的需要在webpack 中做如下配置： webpack.config.js const { BundleAnalyzerPlugin } = require(‘webpack-bundle-analyzer’) plugins: [ ..., new BundleAnalyzerPlugin({ analyzerPort: 8081, }), ]

本人于7-8月开始准备面试，过五关斩六将，最终抱得网易归，深深感受到高级前端面试的套路。以下是自己整理的面试题汇总，不敢藏私，统统贡献出来。 面试的公司分别是：阿里、网易、滴滴、今日头条、有赞、挖财、沪江、饿了么、携程、喜马拉雅、兑吧、微医、寺库、宝宝树、海康威视、蘑菇街、酷家乐、百分点和海风教育。 以下是面试题汇总，前端进阶系列会持续深入更新面试题解，共勉！ 阿里 使用过的koa2中间件 koa-body原理 介绍自己写过的中间件 有没有涉及到Cluster 介绍pm2 master挂了的话pm2怎么处理 如何和MySQL进行通信 React声明周期及自己的理解 如何配置React-Router 路由的动态加载模块 服务端渲染SSR 介绍路由的history 介绍Redux数据流的流程 Redux如何实现多个组件之间的通信，多个组件使用相同状态如何进行管理 多个组件之间如何拆分各自的state，每块小的组件有自己的状态，它们之间还有一些公共的状态需要维护，如何思考这块 使用过的Redux中间件 如何解决跨域的问题 常见Http请求头 移动端适配1px的问题 介绍flex布局 其他css方式设置垂直居中 居中为什么要使用transform（为什么不使用marginLeft/Top） 使用过webpack里面哪些plugin和loader webpack里面的插件是怎么实现的 dev

　　之前自学过一点vue，看vue的官网的时候，觉得这vue真是太简单了，这么容易就实现了数据的双向绑定，于是准备将自己项目的前端重构为vue。vue的官网说对于新手，如果不了解webpack，node之类的可以暂时不管，但随着自己重构的逐渐深入，发现想跳过webpack之类的是不可能的，因为会发现：哇，项目的结构这么复杂，我一个npm run build就跑起来了，这玩意儿到底咋运行的？这么多配置文件跟文件夹都是干啥的，这些里边的配置都是什么意思？会发现项目正朝着不受控制的方向越行越远，这显然是不能被容忍的，webpack必须搞定之！ 　　于是，便有了本系列，webpack的粗浅认识，目的是了解webpack的打包过程，熟悉webpack的各项配置，为前端开发打牢基础。 ------------------------------------------------------------------------------------------------------------------- 1、webpack是什么 　　一个前端打包工具，最新版本为4，跟之前的版本有较大区别，本部分内容采用版本为4.40.2。这也是目前的最新版本。官网地址为： https://www.webpackjs.com/ (中文) https://webpack.js.org/ (英文)

前提：搭建好NodeJS环境 node -v npm -v 1. 什么是vue-cli? vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板，创建命令如下： vue init webpack xxx 注1：xxx 为自己创建项目的名称 注2：必须先安装vue,vue-cli，webpack，node等一些必要的环境 2. 安装vue-cli npm install -g vue-cli npm install -g webpack 注1：安装成功后，会出现如下文件 D:\initPath 　　node-v10.15.3-win-x64 　　　　node_global 　　　　　　vue 　　　　　　vue.cmd 　　　　　　vue-init 　　　　　　vue-init.cmd 　　　　　　vue-list 　　　　　　vue-list.cmd 注2：安装完成之后打开命令窗口并输入 vue -V（注意这里是大写的“V”），如果出现相应的版本号，则说明安装成功。 3. 使用脚手架vue-cli(2.X版)来构建项目 步骤一：使用脚手架创建项目骨架 此步骤可理解成：使用eclipse创建一个maven的web项目 cmd 打开命令窗口 d: 切换到d盘 cd d:\temp 进入d:\temp目录 vue init webpack spa1

Vue-cli: 什么是vue-cli? vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板，创建命令如下： vue init webpack xxx 注1：xxx 为自己创建项目的名称 注2：必须先安装vue,vue-cli，webpack，node等一些必要的环境 安装vue-cli 打开cmd 在node-v10.15.3-win-x64\node_global下执行以下命令： npm install -g vue-cli npm install -g webpack 安装成功后会出现以下文件： vue vue.cmd vue-init vue-init.cmd vue-list vue-list.cmd 查看是否安装成功： vue -V（注意这里是大写的“V”） 使用脚手架vue-cli(2.X版)来构建项目 cmd: 切换目录： vue init webpack spa1 （项目名） 注1：cmd命令行窗口显示中文乱码，多是因为cmd命令行窗口字符编码不匹配导致 修改cmd窗口字符编码为UTF-8，命令行中执行：chcp 65001 切换回中文：chcp 936 这两条命令只在当前窗口生效，重启后恢复之前的编码。 注2：“一问一答”模式 1.Project name：项目名，默认是输入时的那个名称spa1，直接回车 2.Project

加入新公司一个月，最近接手在做一个 chrom 浏览器插件的项目，开发过程中发现项目打包的时间很长，足足有30多秒，这是让人很难接受的，而且构建的显示了几条包体积过大的提示信息： 可以看到，打包后有三个包超过了建议的体积，是什么导致了打包时间长和包的体积过大呢？ 下面通过一些具体方法来分析原因和解决这个问题。 什么原因导致构建包变得这么大？ 为了分析是什么导致构建包为什么会变得这么大，可以安装 webpack-bundle-analyzer 插件，通过它可以直观地查看构建包中所有项目的大小。 npm install —save-dev webpack-bundle-analyzer 对应的需要在 webpack.config.js 中做如下配置： const { BundleAnalyzerPlugin } = require(‘webpack-bundle-analyzer’) plugins: [ ..., new BundleAnalyzerPlugin({ analyzerPort: 8081, }), ] 配置完成后再次运行构建 npm start ，浏览器会自动打开 http://127.0.0.1:8081 ，在网页上可以看到构建包中每个文件的详细信息。 从图中可以找出影响体积的罪魁祸首有： jquery、Moment、mammoth、html2canvas、xlsx

一、webpack基本使用 1.新建空白文件（目录）文件名不能是webpack，运行 npm init -y （路径中不能有中文），初始化package.json文件 2.创建src源代码目录 3.在src下创建index.html 4.初始化首页基本的结构 5.下载页面需要的依赖包 二、在项目中安装和配置webpack 1.运行 npm install webpack webpack-cli –D ，安装webpack相关工具 2.在项目根目录创建webpack.config.js文件，配置文件 3.在webpack文件中添加 module.exports = { mode: 'development' // mode 用来指定构建模式 } 4.在package.json中 "scripts":{//添加 "dev":"webpack" } 5.在终端中运行 npm run dev 启动webpack进行项目打包 三、打包的入口和出口 1.webpack 默认 入口文件：src:index.js 出口文件：dist:main.js 2.需要修改默认文件时 在module.exports中添加 entry: path.join(__dirname, './src/index.js'),//打包入口路径 output: { path: path.join(__dirname, '.

webpack 作为前端最火的构建工具，是前端自动化工具链 最重要的部分 ，使用门槛较高。本系列是笔者自己的学习记录，比较基础，希望通过 问题 + 解决方式 的模式，以前端构建中遇到的具体需求为出发点，学习 webpack 工具中相应的处理办法。（本篇中的参数配置及使用方式均基于 webpack4.0版本 ） 本篇摘要： 本篇主要介绍基于 webpack4.0 的 splitChunks 分包技术。 [TOC] 一. Js模块化开发 javascript 之所以需要打包合并，是因为模块化开发的存在。开发阶段我们需要将 js 文件分开写在很多零碎的文件中，方便调试和修改，但如果就这样上线，那首页的 http 请求数量将直接爆炸。同一个项目，别人2-3个请求就拿到了需要的文件，而你的可能需要20-30个，结果就不用多说了。 但是合并脚本可不是 “把所有的碎片文件都拷贝到一个 js 文件里” 这样就能解决的，不仅要解决命名空间冲突的问题，还需要兼容不同的模块化方案，更别提根据模块之间复杂的依赖关系来手动确定模块的加载顺序了，所以利用自动化工具来将开发阶段的 js 脚本碎片进行合并和优化是非常有必要的。 二. Js文件的一般打包需求 代码编译（ TS 或 ES6 代码的编译） 脚本合并 公共模块识别 代码分割 代码压缩混淆 三. 使用webpack处理js文件 3.1