处理资源文件#
看完本节, 你将了解:
- 三种处理资源文件的方式
- 第一种处理方式 file-loader
使用file-loader处理资源文件, 参考链接 <https://www.npmjs.com/package/file-loader >
安装命令:
npm install file-loader --save-dev
参照上面链接中的示例配置, 为webpack.config.js中添加file-loader相关的模块
示例:
rules: [ { test: /\.(png|jpe?g|gif)$/i, use: [ { loader: 'file-loader', options:{ // 指定webpack打包后, 输出的路径 name: 'static/images/[name].[ext]', // 这个publicPath规定的路径, 就是webpack运行项目后, 所有的资源文件url的最前面的公共部分 publicPath: '/', } }, ], } ]
注意点: 如果不添加publicPath的话, 将出现下面的问题
- 第二种处理方式
参考链接: https://www.npmjs.com/package/url-loader
url-loader的优点, 会针对不同图片做不同的压缩
安装命令
npm install url-loader --save-dev
同样是在webpack.config.js中添加配置
{ test: /\.(png|jpg|gif)$/i, use: [ { loader: 'url-loader', options: { // url-loader和file-loader的工作原理相似, 当资源的大小小于limit指定的值时, 资源将被替换成base64编码的数据植入html或者 css中 limit: 80, name: 'static/images/[name].[ext]', // 这个publicPath规定的路径, 就是webpack运行项目后, 所有的资源文件url的最前面的公共部分 publicPath: '/', }, }, ], }
url-loader的特点如下:
- 当资源size < limit值时, 将使用base64对资源进行加密处理
- 当资源size > limit值时, 和file-loader相似, 将图片本身输出到指定的目录中
- 第三种处理方式
比如项目中引用了字体文件, 直接写死在index.html模板中, 而不需要使用file-loader或者url-loader进行压缩之类webpack的处理和生成的操作, 那么可以使用下面的插件, 直接进行文件的copy
参考链接: https://www.npmjs.com/package/copy-webpack-plugin
命令:
npm install url-loader --save-dev
参考webpack.config.js如下:
const CopyPlugin = require('copy-webpack-plugin'); module.exports = { plugins: [ new CopyPlugin([ { // 将项目根路径下的static目录中的内容, 拷贝到dist/static/images中 from: path.resolve(process.cwd(),'static/'), to: path.resolve(process.cwd(),'dist/static/images中') }, ]), ], };
添加Babel-loader#
为什么要使用babel-loader?
我们都是到, 浏览器只认识html css 原生js , 后续js发展的很快, ES5 ES6出世了, 但是不少浏览器根本不支持ES6的语法, 比如 import export 对象/函数 等等
如何使用?
参考链接: https://www.npmjs.com/package/babel-loader
安装命令:
npm install -D babel-loader @babel/core @babel/preset-env webpack
示例:
rules: [ // the 'transform-runtime' plugin tells Babel to // require the runtime instead of inlining it. { test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'], plugins: ['@babel/plugin-transform-runtime'] } } } ]
webpack让前端项目独立占用一个端口运行#
通过这小节你将知道:
- webpack 通过什么让前端项目独立运行
- 如何安装这个插件
- 如何配置进webpack, 让webpack使用它
- 在那个配置文件中对devs-server进行更多的配置
参考连接: https://www.npmjs.com/package/webpack-dev-server
安装命令:
npm install webpack-dev-server --save-dev
修改npm的配置文件, 添加dev选项
这也就是为啥, 通过脚手架构建的开发环境, 能npm run dev运行起来
并且, 项目运行起来后, 我们做出的任何修改, 都会热加载进来, 时时更新, 无须重启
在webpack.config.js中添加devServer模块
如:
一般在开发时. 这个配置肯定是需要定制的, 如果在这里模拟前后端联调, 就在这个模块配置mock数据的地址
devServer: { change xxx-api/login => mock/login detail: https://cli.vuejs.org/config/#devserver-proxy },
或者是真的在前后端联调, 因为端口不同将出现跨域, 在这里配置代理服务器的地址
// 参考: https://www.webpackjs.com/configuration/dev-server/#devserver-proxy devServer: { proxy: 'http://localhost:8089' },
比如, 自动打开啊等等, 更多的配置 参考链接
