webpack搭建vue开发环境

首先全局安装：node、npm、webpack、webpack-cli

npm install webpack webpack-cli -D

接着创建webpack.config.js

现在需要打包images里面得图片

npm init -y //生成package.json

此时目录如下：

npm install url-loader -S  
//安装file-loader
//安装url-loader到当前并记录到package.json

 npm install file-loader -S 
 //安装file-loader ：
 //生成的文件的文件名就是文件内容的
 //MD5哈希值并会保留所引用资源的原始扩展名

在开发模式的情况下：mode：'development'时：无论你的图片是否 使用，在（limit设置数值要在被打包的图片的大小范围以内的）都会生成dataUrl打包到bundele.js，而limit设置的数值小于图片本身大小，也会直接打包到dist文件当中，但只会生成图片本身而不是dataUrl
在生产模式的情况下：mode：'production'时：在（limit设置数值要在被打包的图片的大小范围以内的），图片使用：会生成dataUrl打包到bundle.js里面。不使用不会打包成dataUrl，也不会生成图片本身打包到dist文件中（直接去除无用代码）。如果设置的limit小于被打包图片的大小，无论使用使用了图片都会生成图片本身在dist文件当中。总结：优先级看来都是limit比较高

npm install [email protected] @babel/core @babel/preset-env webpack
// 把es6那些转换成es5
npm install @babel/plugin-transform-runtime -D 
npm install @babel/runtime -D
// 对es6降级es5的一个垫片，可以按需引入，模块化加载，不污染全局

此时目录如下：

• babel-loader @babel/core 可以支持es6语法
• @babel/preset-env 是根据浏览器或者运行环境来将es6转化成es5，比如根据browserslist
• 补充说明1：@babel/polyfill 是对es6降级es5的一个垫片，是对babel-loader的补充，但是会污染全局，不能按需引入，不建议这种方式
• 补充说明2：@babel/runtime @babel/plugin-transform-runtime也是对es6降级es5的一个垫片，可以按需引入，模块化加载，不污染全局，推荐使用
• file-loader 或者 url-loader可以支持引入文件
• file-loader不支持小文件转化为base64格式，但是可以为文件名添加hash值，url-loader可以支持小文件转化为base64格式，这两个可以搭配使用
• 详情可点击于此：https://babeljs.io/docs/en/next/babel-plugin-transform-runtime.html