全局安装:npm -g
局部安装: 在有package.json文件的文件夹内 npm install.
node-sass 可以监听css文件等功能,将scss,sass等新的转化为浏览器认识的css文件
babel可以把JS的ES6等新语法转化为IE可以使用的语法
watch可以将html中或者图片等其他所有的改动,cp复制dist下
现在所有的文件,都可以翻译完并自动生成到dist目录下了
(错误点:.一个点为当前目录,两个点是上一目录)
弄清了全局变量和局部变量的区别.
全局是在公共路径中存在的文件,所以你可以直接使用 http-server -c-1等命令
局部是指安装在当前模块内的文件,所以需要按路径找到该文件(如node-sass),如:
./node_modules/.bin/node-sass -v === 全局变量的 node-sass -v
set-url 可以改变目前项目的提交地址
npm-install 它找不到的东西
谈一下你对webpack的理解?
webpack就是做一些自动化的流程,比如说通过babel把ES6变成ES5,通过sass-loader把sass变成scss,通过postcss-loader把没前缀的变成有前缀的.
用parcel代替该死的webpack (适用于简单的项目中)
-
有哪些常见 loader 和 plugin，你用过哪些？
file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件
url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去
image-loader：加载并且压缩图片文件
babel-loader：把 ES6 转换成 ES5
css-loader：加载 CSS，支持模块化、压缩、文件导入等特性
style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS。
eslint-loader：通过 ESLint 检查 JavaScript 代码 -
有哪些常见的Plugin？他们是解决什么问题的？
define-plugin：定义环境变量
commons-chunk-plugin：提取公共代码
uglifyjs-webpack-plugin：通过UglifyES压缩ES6代码 -
Loader和Plugin的不同？
不同的作用:
Loader直译为"加载器"。Webpack将一切文件视为模块，但是webpack原生是只能解析js文件，如果想将其他文件也打包的话，就会用到loader。 所以Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。
Plugin直译为"插件"。Plugin可以扩展webpack的功能，让webpack具有更多的灵活性。 在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。
不同的用法:
Loader在module.rules中配置，也就是说他作为模块的解析规则而存在。 类型为数组，每一项都是一个Object，里面描述了对于什么类型的文件（test），使用什么加载(loader)和使用的参数（options）
Plugin在plugins中单独配置。 类型为数组，每一项是一个plugin的实例，参数都通过构造函数传入。
-
webpack如何按需加载代码？
import('文件路径') -
webpack如何提高构建速度？
多入口情况下，使用CommonsChunkPlugin来提取公共代码
利用DllPlugin和DllReferencePlugin预编译资源模块 通过DllPlugin来对那些我们引用但是绝对不会修改的npm包来进行预编译，再通过DllReferencePlugin将预编译的模块加载进来。
使用Happypack 实现多线程加速编译
使用webpack-uglify-parallel来提升uglifyPlugin的压缩速度。 原理上webpack-uglify-parallel采用了多核并行压缩来提升压缩速度
-
webpack转义出的文件过大怎么办？
用webpack优化前端性能是指优化webpack的输出结果，让打包的最终结果在浏览器运行快速高效。- 压缩代码。删除多余的代码、注释、简化代码的写法等等方式。可以利用webpack的UglifyJsPlugin和ParallelUglifyPlugin来压缩JS文件， 利用cssnano（css-loader?minimize）来压缩css
- 利用CDN加速。在构建过程中，将引用的静态资源路径修改为CDN上对应的路径。可以利用webpack对于output参数和各loader的publicPath参数来修改资源路径
- 删除死代码（Tree Shaking）。将代码中永远不会走到的片段删除掉。可以通过在启动webpack时追加参数--optimize-minimize来实现
提取公共代码。
网友评论