vue Webpack
什么是Webpack:
它是模板打包的工具,可以分析项目结构,发现其他一些拓展语言(TypeScript、Scss)等等,这些拓展语言浏览器是不能识别的,将他们转化打包成浏览器可以识别的。
Webpack的工作方式:
把项目当成是一个整体,找到index.js主文件,然后从这个文件开始找到项目中的所有依赖文件,使用loaders处理,最后打包成浏览器可识别的js文件。
webpack把所有的文件当成模块,通过loaders来处理
使用webpack
第一种是在终端输入命令
指定入口文件和文件打包后放置的地方,如果weibpack不是全局安装的,还要指定weibpack在node_modules中的地址。
但是容易出错。
第二种是可以通过配置文件
webpack.config.js文件中,里面都是相关的配置代码,目前涉及的内容是入口文件和打包后的文件的路径,然后在终端输入相关命令。
(非全局安装webpack)node_modules/.bin/webpack
如果命令都不用输入,那岂不是更好?就用第三种打包方式。
第三种用npm
在package.json的script进行相关设置,里面有一定顺序的命令的位置。npm会引导任务执行,通过npm start或者是npm run (script name)就可打包文件。
source maps
当我们需要调试代码的时候,通过打包后的文件不容易找到相关代码的位置,我们可以在webpack.config.js配置文件中定义devtool配置,有四种相关的配置选项。这样会生成source maps文件或者是文件模块,它提供了一种编译文件和源文件的方法。
其中在配置选项种eval-source-map适用于小到中型的项目。
devserve
webpack提供一个本地的开发服务器,默认为8080端口,可以让浏览器实时监听代码,并且可以自动更新,不过它是一个单独的组件,需要安装。
Loaders
使用loaders,webpack可以调用外部的脚本或者工具,对不同格式的文件进行处理。比如把scss转换为css,ES6或者ES7转化成现代浏览器兼容的JS文件。也可以对React的JSX文件转化成JS文件。
可以在webpack.config.js配置文件中的moudule进行配置
Babel
Babel其实是一个编译代码的平台,它允许开发者使用ES6、JSX等代码,尽管浏览器不支持这些代码。
Babel其实是几个模块化的包,核心功能主要在babel-core的npm包中,每次你要使用一个功能,你都要单独安装包,webpack可以将不同的包整合在一起使用。用的最多的是解析ES6的babel-env-preset和解析JSX的babel-preset-react
CSS
css-loader实现require的功能
style-loader将所有的计算后的样式加入到页面中
两者结合可以将样式嵌入到打包后的JS文件
以后根据项目再来补充吧。。。
Plugins
loaders和Plugins的区别:loaders一次处理一个源文件,比如scss
、JSX等。Plugins是直接对整个构建过程起过程。
先用npm安装后,然后在webpack中的Plugins中增加插件的实例,Plugins是一个数组。
-
HtmlWebpackPlugin
会依据一个index.html模板自动生成一个index.html,同时增加依赖的css、js、favicon等。在new插件实例中传入参数,参数为该模板的路径 -
Hot Module Replacement
当我修改组件代码,会自动刷新修改后的效果。
在webpack配置中增加实例代码后,还要再devserver增加hot参数。
这样还不行,还要再js模块中执行一个webpack提供的API才能执行热加载。
写的超级好